@progress/kendo-react-layout 13.4.0-develop.5 → 14.0.0-develop.2

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ft=require("react"),r=require("prop-types"),ut=require("./TabStripNavigationItem.js"),M=require("@progress/kendo-react-common"),bt=require("@progress/kendo-react-buttons"),I=require("@progress/kendo-svg-icons"),dt=require("@progress/kendo-react-intl"),S=require("./messages/index.js");function mt(b){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const s in b)if(s!=="default"){const T=Object.getOwnPropertyDescriptor(b,s);Object.defineProperty(d,s,T.get?T:{enumerable:!0,get:()=>b[s]})}}return d.default=b,Object.freeze(d)}const n=mt(ft),pt=b=>Array.from({length:b}),C="smooth",p="prev",k="next",x=b=>{const{selected:d,tabPosition:s,tabAlignment:T,children:w,onSelect:y,onKeyDown:q,onScroll:A,navItemId:R,contentPanelId:F,renderAllContent:D,scrollable:E,scrollButtons:P,scrollButtonsPosition:m,tabIndex:_,buttonScrollSpeed:j,mouseScrollSpeed:W,prevButton:$,nextButton:K,dir:U,size:V,containerScrollPosition:v,itemsNavRef:ot}=b,nt=n.useRef(null),N=ot||nt,H=dt.useLocalization(),g=n.useCallback(()=>/top|bottom/.test(s||"top"),[s]),h=n.useCallback(()=>U==="rtl",[U]),X=n.useCallback(()=>{const t=N.current,e=t==null?void 0:t.children[d||0];if(e instanceof HTMLElement&&t instanceof HTMLElement){const l=g(),u=l?t.offsetWidth:t.offsetHeight,c=l?e.offsetWidth:e.offsetHeight,i=l?"left":"top";let o=l?t.scrollLeft:t.scrollTop,a=0;if(h()){const f=e.offsetLeft;o=o*-1,f<0?(a=f-c+t.offsetLeft,t.scrollTo({[i]:a,behavior:C})):f+c>u-o&&(a=o+f-c,t.scrollTo({[i]:a,behavior:C}))}else{const f=l?e.offsetLeft-t.offsetLeft:e.offsetTop-t.offsetTop;o+u<f+c?(a=f+c-u,t.scrollTo({[i]:a,behavior:C})):o>f&&(a=f,t.scrollTo({[i]:a,behavior:C}))}}},[N,d,g,h]);n.useEffect(()=>{E&&X()},[E,d,X]);const B=n.useCallback(()=>{A==null||A()},[A]),G=n.useCallback((t,e)=>{const l=N.current;if(!l)return;const u=g(),c=u?l.scrollWidth-l.offsetWidth:l.scrollHeight-l.offsetHeight,i=(e.type==="click"?j:W)||0;let o=u?l.scrollLeft:l.scrollTop;h()&&g()?(t===p&&o<0&&(o+=i),t===k&&o<c&&(o-=i),o=Math.min(0,Math.min(c,o))):(t===p&&o>0&&(o-=i),t===k&&o<c&&(o+=i),o=Math.max(0,Math.min(c,o)));const a=e.type==="click"?C:void 0;u?l.scrollTo({left:o,behavior:a}):l.scrollTo({top:o,behavior:a})},[N,g,h,j,W]),z=n.useCallback((t,e)=>{G(t,e)},[G]),J=n.useCallback(t=>{z(p,t)},[z]),Q=n.useCallback(t=>{z(k,t)},[z]),O=n.useCallback(t=>{const e=g(),l=h(),c=e?l?"caret-alt-right":"caret-alt-left":"caret-alt-up",i=l?I.caretAltRightIcon:I.caretAltLeftIcon,o=e?i:I.caretAltUpIcon,f=e?l?"caret-alt-left":"caret-alt-right":"caret-alt-down",st=l?I.caretAltLeftIcon:I.caretAltRightIcon,rt=e?st:I.caretAltDownIcon,L={prev:{arrowTab:"k-tabstrip-prev",fontIcon:c,svgIcon:o,title:H.toLanguageString(S.prevArrowTitle,S.messages[S.prevArrowTitle])},next:{arrowTab:"k-tabstrip-next",fontIcon:f,svgIcon:rt,title:H.toLanguageString(S.nextArrowTitle,S.messages[S.nextArrowTitle])}},ct=(t===p?$:K)||bt.Button,at=t===p?J:Q,it=v===null||t===p&&(v==="start"||v==="top")||t===k&&(v==="end"||v==="bottom");return n.createElement(ct,{disabled:it,className:M.classNames(`${L[t].arrowTab}`),onClick:at,icon:L[t].fontIcon,svgIcon:L[t].svgIcon,size:V,tabIndex:-1,fillMode:"flat",title:L[t].title})},[g,h,$,K,J,Q,v,V,H]),Y=n.Children.count(w),Z=n.Children.toArray(w),tt=n.useMemo(()=>w?pt(Y).map((t,e,l)=>{const u={active:d===e,disabled:Z[e].props.disabled,index:e,title:Z[e].props.title,first:e===0,last:e===l.length-1,contentPanelId:F,renderAllContent:D,id:R,onSelect:y,onScroll:B};return n.createElement(ut.TabStripNavigationItem,{key:`${R}-${e}`,...u})}):null,[w,Y,d,F,D,R,y,B]),lt=n.useMemo(()=>M.classNames("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll",{"k-hstack":s==="top"||s==="bottom","k-vstack":s==="left"||s==="right"}),[s]),et=n.useMemo(()=>M.classNames("k-tabstrip-items k-tabstrip-items-scroll k-reset",`k-tabstrip-items-${T}`),[T]);return n.createElement("div",{className:lt},E?n.createElement(n.Fragment,null,P!=="hidden"&&m&&["split","start","around","before"].includes(m)&&O(p),P!=="hidden"&&(m==="start"||m==="before")&&O(k),n.createElement("ul",{ref:N,className:et,role:"tablist",tabIndex:_,onKeyDown:q,onScroll:B,"aria-orientation":s==="left"||s==="right"?"vertical":void 0},tt),P!=="hidden"&&(m==="end"||m==="after")&&O(p),P!=="hidden"&&m&&["split","end","around","after"].includes(m)&&O(k)):n.createElement("ul",{className:et,role:"tablist",tabIndex:_,onKeyDown:q},tt))};x.propTypes={children:r.oneOfType([r.element,r.arrayOf(r.element)]),onSelect:r.func,onKeyDown:r.func,onScroll:r.func,selected:r.number,tabIndex:r.number,scrollable:r.bool,size:r.oneOf(["small","medium","large"]),scrollButtons:r.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:r.oneOf(["split","start","end","around","before","after"]),containerScrollPosition:r.oneOf(["start","end","top","bottom","middle",null])};x.displayName="TabStripNavigation";exports.TabStripNavigation=x;

package/tabstrip/TabStripNavigation.mjs

@@ -5,166 +5,179 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-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 { caretAltLeftIcon as k, caretAltRightIcon as I, caretAltDownIcon as D, caretAltUpIcon as H } from "@progress/kendo-svg-icons";
-import { provideLocalizationService as y } from "@progress/kendo-react-intl";
-import { nextArrowTitle as A, messages as P, prevArrowTitle 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(m, t);
-    }, this.handleArrowClick = (t, o) => {
-      this.setNewScrollPosition(t, o);
-    }, this.setNewScrollPosition = (t, o) => {
-      const s = this.itemsNavRef.current;
-      if (!s)
+import * as n from "react";
+import r from "prop-types";
+import { TabStripNavigationItem as bt } from "./TabStripNavigationItem.mjs";
+import { classNames as x } from "@progress/kendo-react-common";
+import { Button as pt } from "@progress/kendo-react-buttons";
+import { caretAltLeftIcon as Z, caretAltRightIcon as tt, caretAltDownIcon as ut, caretAltUpIcon as dt } from "@progress/kendo-svg-icons";
+import { useLocalization as vt } from "@progress/kendo-react-intl";
+import { nextArrowTitle as ot, messages as et, prevArrowTitle as nt } from "./messages/index.mjs";
+const ht = (P) => Array.from({ length: P }), S = "smooth", p = "prev", h = "next", lt = (P) => {
+  const {
+    selected: g,
+    tabPosition: m,
+    tabAlignment: B,
+    children: k,
+    onSelect: O,
+    onKeyDown: R,
+    onScroll: T,
+    navItemId: E,
+    contentPanelId: M,
+    renderAllContent: F,
+    scrollable: H,
+    scrollButtons: C,
+    scrollButtonsPosition: b,
+    tabIndex: y,
+    buttonScrollSpeed: D,
+    mouseScrollSpeed: W,
+    prevButton: $,
+    nextButton: _,
+    dir: K,
+    size: U,
+    containerScrollPosition: d,
+    itemsNavRef: rt
+  } = P, st = n.useRef(null), I = rt || st, L = vt(), u = n.useCallback(() => /top|bottom/.test(m || "top"), [m]), v = n.useCallback(() => K === "rtl", [K]), V = n.useCallback(() => {
+    const t = I.current, o = t == null ? void 0 : t.children[g || 0];
+    if (o instanceof HTMLElement && t instanceof HTMLElement) {
+      const l = u(), i = l ? t.offsetWidth : t.offsetHeight, s = l ? o.offsetWidth : o.offsetHeight, f = l ? "left" : "top";
+      let e = l ? t.scrollLeft : t.scrollTop, c = 0;
+      if (v()) {
+        const a = o.offsetLeft;
+        e = e * -1, a < 0 ? (c = a - s + t.offsetLeft, t.scrollTo({ [f]: c, behavior: S })) : a + s > i - e && (c = e + a - s, t.scrollTo({ [f]: c, behavior: S }));
+      } else {
+        const a = l ? o.offsetLeft - t.offsetLeft : o.offsetTop - t.offsetTop;
+        e + i < a + s ? (c = a + s - i, t.scrollTo({ [f]: c, behavior: S })) : e > a && (c = a, t.scrollTo({ [f]: c, behavior: S }));
+      }
+    }
+  }, [I, g, u, v]);
+  n.useEffect(() => {
+    H && V();
+  }, [H, g, V]);
+  const A = n.useCallback(() => {
+    T == null || T();
+  }, [T]), X = n.useCallback(
+    (t, o) => {
+      const l = I.current;
+      if (!l)
         return;
-      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 = {
+      const i = u(), s = i ? l.scrollWidth - l.offsetWidth : l.scrollHeight - l.offsetHeight, f = (o.type === "click" ? D : W) || 0;
+      let e = i ? l.scrollLeft : l.scrollTop;
+      v() && u() ? (t === p && e < 0 && (e += f), t === h && e < s && (e -= f), e = Math.min(0, Math.min(s, e))) : (t === p && e > 0 && (e -= f), t === h && e < s && (e += f), e = Math.max(0, Math.min(s, e)));
+      const c = o.type === "click" ? S : void 0;
+      i ? l.scrollTo({ left: e, behavior: c }) : l.scrollTo({ top: e, behavior: c });
+    },
+    [I, u, v, D, W]
+  ), N = n.useCallback(
+    (t, o) => {
+      X(t, o);
+    },
+    [X]
+  ), j = n.useCallback(
+    (t) => {
+      N(p, t);
+    },
+    [N]
+  ), q = n.useCallback(
+    (t) => {
+      N(h, t);
+    },
+    [N]
+  ), z = n.useCallback(
+    (t) => {
+      const o = u(), l = v(), s = o ? l ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up", e = o ? l ? tt : Z : dt, a = o ? l ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down", at = o ? l ? Z : tt : ut, w = {
         prev: {
           arrowTab: "k-tabstrip-prev",
-          fontIcon: o ? this.isRtl() ? "caret-alt-right" : "caret-alt-left" : "caret-alt-up",
-          svgIcon: o ? this.isRtl() ? I : k : H,
-          title: s.toLanguageString(R, P[R])
+          fontIcon: s,
+          svgIcon: e,
+          title: L.toLanguageString(nt, et[nt])
         },
         next: {
           arrowTab: "k-tabstrip-next",
-          fontIcon: o ? this.isRtl() ? "caret-alt-left" : "caret-alt-right" : "caret-alt-down",
-          svgIcon: o ? this.isRtl() ? k : I : D,
-          title: s.toLanguageString(A, P[A])
+          fontIcon: a,
+          svgIcon: at,
+          title: L.toLanguageString(ot, et[ot])
         }
-      }, 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,
+      }, it = (t === p ? $ : _) || pt, ft = t === p ? j : q, mt = d === null || t === p && (d === "start" || d === "top") || t === h && (d === "end" || d === "bottom");
+      return /* @__PURE__ */ n.createElement(
+        it,
         {
-          disabled: e,
-          className: v(`${r[t].arrowTab}`),
-          onClick: i,
-          icon: r[t].fontIcon,
-          svgIcon: r[t].svgIcon,
-          size: this.props.size,
+          disabled: mt,
+          className: x(`${w[t].arrowTab}`),
+          onClick: ft,
+          icon: w[t].fontIcon,
+          svgIcon: w[t].svgIcon,
+          size: U,
           tabIndex: -1,
           fillMode: "flat",
-          title: r[t].title
+          title: w[t].title
         }
       );
+    },
+    [
+      u,
+      v,
+      $,
+      _,
+      j,
+      q,
+      d,
+      U,
+      L
+    ]
+  ), G = n.Children.count(k), J = n.Children.toArray(k), Q = n.useMemo(() => k ? ht(G).map((t, o, l) => {
+    const i = {
+      active: g === o,
+      disabled: J[o].props.disabled,
+      index: o,
+      title: J[o].props.title,
+      first: o === 0,
+      last: o === l.length - 1,
+      contentPanelId: M,
+      renderAllContent: F,
+      id: E,
+      onSelect: O,
+      onScroll: A
     };
-  }
-  /**
-   * @hidden
-   */
-  componentDidMount() {
-    this.props.scrollable && this.scrollToSelected();
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(t) {
-    const { scrollable: o, selected: s } = this.props;
-    o && t.selected !== s && this.scrollToSelected();
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const {
-      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__ */ h.createElement(x, { key: d, ...O });
-    }));
-    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: T,
-        role: "tablist",
-        tabIndex: this.props.tabIndex,
-        onKeyDown: i,
-        onScroll: this.onScroll,
-        "aria-orientation": o === "left" || o === "right" ? "vertical" : void 0
-      },
-      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 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 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 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 }));
-      }
-    }
-  }
-  horizontalScroll() {
-    return /top|bottom/.test(this.props.tabPosition || "top");
-  }
+    return /* @__PURE__ */ n.createElement(bt, { key: `${E}-${o}`, ...i });
+  }) : null, [k, G, g, M, F, E, O, A]), ct = n.useMemo(
+    () => x("k-tabstrip-items-wrapper k-tabstrip-items-wrapper-scroll", {
+      "k-hstack": m === "top" || m === "bottom",
+      "k-vstack": m === "left" || m === "right"
+    }),
+    [m]
+  ), Y = n.useMemo(
+    () => x("k-tabstrip-items k-tabstrip-items-scroll k-reset", `k-tabstrip-items-${B}`),
+    [B]
+  );
+  return /* @__PURE__ */ n.createElement("div", { className: ct }, H ? /* @__PURE__ */ n.createElement(n.Fragment, null, C !== "hidden" && b && ["split", "start", "around", "before"].includes(b) && z(p), C !== "hidden" && (b === "start" || b === "before") && z(h), /* @__PURE__ */ n.createElement(
+    "ul",
+    {
+      ref: I,
+      className: Y,
+      role: "tablist",
+      tabIndex: y,
+      onKeyDown: R,
+      onScroll: A,
+      "aria-orientation": m === "left" || m === "right" ? "vertical" : void 0
+    },
+    Q
+  ), C !== "hidden" && (b === "end" || b === "after") && z(p), C !== "hidden" && b && ["split", "end", "around", "after"].includes(b) && z(h)) : /* @__PURE__ */ n.createElement("ul", { className: Y, role: "tablist", tabIndex: y, onKeyDown: R }, Q));
 };
-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])
+lt.propTypes = {
+  children: r.oneOfType([r.element, r.arrayOf(r.element)]),
+  onSelect: r.func,
+  onKeyDown: r.func,
+  onScroll: r.func,
+  selected: r.number,
+  tabIndex: r.number,
+  scrollable: r.bool,
+  size: r.oneOf(["small", "medium", "large"]),
+  scrollButtons: r.oneOf(["auto", "visible", "hidden"]),
+  scrollButtonsPosition: r.oneOf(["split", "start", "end", "around", "before", "after"]),
+  containerScrollPosition: r.oneOf(["start", "end", "top", "bottom", "middle", null])
 };
-let C = w;
+lt.displayName = "TabStripNavigation";
 export {
-  C as TabStripNavigation
+  lt as TabStripNavigation
 };

package/tabstrip/TabStripNavigationItem.d.ts

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
 import * as React from 'react';
 /**
  * The props that are passed by the TabStripNavigation to the TabStripNavigationItem.
@@ -52,31 +51,10 @@ export interface TabStripNavigationItemProps {
      */
     renderAllContent?: boolean;
 }
-export declare class TabStripNavigationItem extends React.Component<TabStripNavigationItemProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        active: PropTypes.Requireable<boolean>;
-        disabled: PropTypes.Requireable<boolean>;
-        index: PropTypes.Requireable<number>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        title: PropTypes.Requireable<NonNullable<string | PropTypes.ReactElementLike | null | undefined>>;
-        first: PropTypes.Requireable<boolean>;
-        last: PropTypes.Requireable<boolean>;
-    };
-    /**
-     * @hidden
-     */
-    private itemRef;
-    /**
-     * @hidden
-     */
+/**
+ * Represents the TabStripNavigationItem component.
+ */
+export declare const TabStripNavigationItem: React.ForwardRefExoticComponent<TabStripNavigationItemProps & React.RefAttributes<{
     focus: () => void;
     blur: () => void;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    private onClick;
-}
+}>>;

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

package/tabstrip/TabStripNavigationItem.mjs

@@ -5,52 +5,62 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as i from "react";
+import * as e from "react";
 import t from "prop-types";
-import { classNames as b } from "@progress/kendo-react-common";
-const o = class o extends i.Component {
-  constructor() {
-    super(...arguments), this.itemRef = null, this.focus = () => {
-      this.itemRef && this.itemRef.focus();
-    }, this.blur = () => {
-      this.itemRef && 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: a, active: e, disabled: s, title: c = "Untitled", index: n, renderAllContent: p, first: f, last: d } = this.props, r = p ? `${this.props.contentPanelId}-${n.toString()}` : this.props.contentPanelId, m = {
-      id: `${a}-${n.toString()}`,
-      "aria-selected": e,
-      "aria-controls": e ? r : void 0,
-      "aria-disabled": s,
+import { classNames as y } from "@progress/kendo-react-common";
+const v = e.forwardRef((C, I) => {
+  const {
+    id: d,
+    active: o,
+    disabled: r,
+    title: g = "Untitled",
+    index: a,
+    renderAllContent: u,
+    first: b,
+    last: p,
+    contentPanelId: n,
+    onSelect: i
+  } = C, s = e.useRef(null), f = e.useCallback(() => {
+    var l;
+    (l = s.current) == null || l.focus();
+  }, []), c = e.useCallback(() => {
+    var l;
+    (l = s.current) == null || l.blur();
+  }, []), N = e.useCallback(
+    () => ({
+      focus: f,
+      blur: c
+    }),
+    [f, c]
+  );
+  e.useImperativeHandle(I, N);
+  const k = e.useCallback(() => {
+    i == null || i(a), s.current && (s.current.tabIndex = 0, s.current.focus());
+  }, [i, a]), m = e.useMemo(
+    () => u ? `${n}-${a.toString()}` : n,
+    [u, n, a]
+  ), T = e.useMemo(
+    () => y("k-tabstrip-item", {
+      "k-disabled": r,
+      "k-active": o,
+      "k-first": b,
+      "k-last": p
+    }),
+    [r, o, b, p]
+  ), x = e.useMemo(
+    () => ({
+      id: `${d}-${a.toString()}`,
+      "aria-selected": o,
+      "aria-controls": o ? m : void 0,
+      "aria-disabled": r,
       role: "tab",
-      onClick: s ? void 0 : this.onClick
-    }, h = b("k-tabstrip-item", {
-      "k-disabled": s,
-      "k-active": e,
-      "k-first": f,
-      "k-last": d
-    });
-    return /* @__PURE__ */ i.createElement(
-      "li",
-      {
-        ...m,
-        className: h,
-        ref: (u) => {
-          this.itemRef = u;
-        },
-        onBlur: this.blur,
-        "aria-controls": r
-      },
-      /* @__PURE__ */ i.createElement("span", { className: "k-link" }, c)
-    );
-  }
-};
-o.propTypes = {
+      onClick: r ? void 0 : k
+    }),
+    [d, a, o, m, r, k]
+  );
+  return /* @__PURE__ */ e.createElement("li", { ...x, className: T, ref: s, onBlur: c, "aria-controls": m }, /* @__PURE__ */ e.createElement("span", { className: "k-link" }, g));
+});
+v.propTypes = {
   active: t.bool,
   disabled: t.bool,
   index: t.number,
@@ -59,7 +69,7 @@ o.propTypes = {
   first: t.bool,
   last: t.bool
 };
-let l = o;
+v.displayName = "TabStripNavigationItem";
 export {
-  l as TabStripNavigationItem
+  v as TabStripNavigationItem
 };

package/tabstrip/TabStripTab.d.ts

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
 import * as React from 'react';
 /**
  * Represents the props of the TabStrip tabs.
@@ -33,18 +32,4 @@ export interface TabStripTabProps {
 /**
  * Represents the TabStripTab component.
  */
-export declare class TabStripTab extends React.Component<TabStripTabProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        disabled: PropTypes.Requireable<boolean>;
-        contentClassName: PropTypes.Requireable<string>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        title: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-    };
-    /**
-     * @hidden
-     */
-    render(): null;
-}
+export declare const TabStripTab: React.FC<TabStripTabProps>;

package/tabstrip/TabStripTab.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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("prop-types"),t=()=>null;t.propTypes={disabled:e.bool,contentClassName:e.string,children:e.oneOfType([e.element,e.node]),title:e.oneOfType([e.string,e.element,e.node])};t.displayName="TabStripTab";exports.TabStripTab=t;

package/tabstrip/TabStripTab.mjs

@@ -5,23 +5,15 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as t from "react";
 import e from "prop-types";
-const n = class n extends t.Component {
-  /**
-   * @hidden
-   */
-  render() {
-    return null;
-  }
-};
+const n = () => 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 o = n;
+n.displayName = "TabStripTab";
 export {
-  o as TabStripTab
+  n as TabStripTab
 };