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

package/tabstrip/TabStripContent.mjs

@@ -5,96 +5,88 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
-import i from "prop-types";
-import { Fade as d } from "@progress/kendo-react-animation";
-import { classNames as c } from "@progress/kendo-react-common";
-const l = class l extends n.Component {
-  constructor() {
-    super(...arguments), this.contentId = this.props.contentPanelId, this.childFactory = (e) => n.cloneElement(e, {
-      ...e.props,
-      in: e.props.children.props.id === String(this.contentId + this.props.selected)
-    });
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const { children: e, selected: t, contentPanelId: r, keepTabsMounted: s, navItemId: o, renderAllContent: p } = this.props, a = e && typeof t == "number" && n.Children.toArray(e)[t], m = c(
+import * as e from "react";
+import l from "prop-types";
+import { Fade as f } from "@progress/kendo-react-animation";
+import { classNames as v } from "@progress/kendo-react-common";
+const k = ($) => {
+  const { children: s, selected: t, contentPanelId: p, keepTabsMounted: i, navItemId: u, renderAllContent: E, animation: c, style: y } = $, d = p, h = e.useCallback(
+    (n) => e.cloneElement(n, {
+      ...n.props,
+      in: n.props.children.props.id === String(d + t)
+    }),
+    [d, t]
+  ), b = e.useCallback(
+    (n, r) => {
+      const o = r === t, a = {
+        style: {
+          display: o ? void 0 : "none"
+        }
+      }, C = {
+        display: o ? void 0 : "none"
+      };
+      return n.props.disabled ? null : c ? /* @__PURE__ */ e.createElement(
+        f,
+        {
+          appear: !0,
+          exit: i,
+          style: C,
+          childFactory: i ? h : void 0
+        },
+        /* @__PURE__ */ e.createElement("div", { ...a, id: String(d + r), key: r }, n.props.children)
+      ) : /* @__PURE__ */ e.createElement("div", { ...a, key: r }, n.props.children);
+    },
+    [t, c, i, h, d]
+  ), S = e.useCallback(
+    (n) => i ? e.Children.map(n, (r, o) => b(r, o)) : b(
+      e.Children.toArray(n)[t],
+      t
+    ),
+    [i, b, t]
+  ), I = e.useMemo(() => e.Children.map(s, (n, r) => {
+    const o = n, a = r === t, C = v(
       "k-tabstrip-content",
-      "k-active",
-      a && a.props.contentClassName
-    );
-    return p ? this.renderAllContent(e) : /* @__PURE__ */ n.createElement(
+      { "k-active": a },
+      o.props.contentClassName
+    ), N = c ? /* @__PURE__ */ e.createElement(f, { key: `${r}-${a}`, appear: !0, enter: !0, exit: !1 }, o.props.children) : o.props.children;
+    return /* @__PURE__ */ e.createElement(
       "div",
       {
-        className: m,
-        style: this.props.style,
-        id: r,
+        className: C,
+        style: y,
+        id: `${p}-${r}`,
         role: "tabpanel",
-        "aria-hidden": s,
-        "aria-labelledby": `${o}-${(t == null ? void 0 : t.toString()) || ""}`,
-        tabIndex: 0
+        "aria-hidden": !a,
+        hidden: !a,
+        "aria-labelledby": `${u}-${r}`
       },
-      this.renderContent(e)
-    );
-  }
-  renderContent(e) {
-    return this.props.keepTabsMounted ? n.Children.map(this.props.children, (t, r) => this.renderChild(t, r)) : this.renderChild(
-      n.Children.toArray(e)[this.props.selected],
-      this.props.selected
+      N
     );
-  }
-  renderAllContent(e) {
-    return n.Children.map(e, (t, r) => {
-      const s = t, o = r === this.props.selected, p = c(
-        "k-tabstrip-content",
-        { "k-active": o },
-        s.props.contentClassName
-      );
-      return /* @__PURE__ */ n.createElement(
-        "div",
-        {
-          className: p,
-          style: this.props.style,
-          id: `${this.props.contentPanelId}-${r}`,
-          role: "tabpanel",
-          "aria-hidden": !o,
-          hidden: !o,
-          "aria-labelledby": `${this.props.navItemId}-${r}`
-        },
-        this.props.animation ? /* @__PURE__ */ n.createElement(d, { key: `${r}-${o}`, appear: !0, enter: !0, exit: !1 }, s.props.children) : s.props.children
-      );
-    });
-  }
-  renderChild(e, t) {
-    const r = t === this.props.selected, s = {
-      style: {
-        display: r ? void 0 : "none"
-      }
-    }, o = {
-      position: "initial",
-      display: r ? void 0 : "none"
-    };
-    return e.props.disabled ? null : this.props.animation ? /* @__PURE__ */ n.createElement(
-      d,
-      {
-        appear: !0,
-        exit: this.props.keepTabsMounted,
-        style: o,
-        childFactory: this.props.keepTabsMounted ? this.childFactory : void 0
-      },
-      /* @__PURE__ */ n.createElement("div", { ...s, id: String(this.contentId + t), key: t }, e.props.children)
-    ) : /* @__PURE__ */ n.createElement("div", { ...s, key: t }, e.props.children);
-  }
+  }), [s, t, p, u, y, c]), m = e.useMemo(() => !s || typeof t != "number" ? null : e.Children.toArray(s)[t], [s, t]), M = e.useMemo(
+    () => v("k-tabstrip-content", "k-active", m == null ? void 0 : m.props.contentClassName),
+    [m]
+  );
+  return E ? I : /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: M,
+      style: y,
+      id: p,
+      role: "tabpanel",
+      "aria-hidden": i,
+      "aria-labelledby": `${u}-${(t == null ? void 0 : t.toString()) || ""}`,
+      tabIndex: 0
+    },
+    S(s)
+  );
 };
-l.propTypes = {
-  animation: i.bool,
-  children: i.oneOfType([i.element, i.arrayOf(i.element)]),
-  selected: i.number,
-  style: i.object
+k.propTypes = {
+  animation: l.bool,
+  children: l.oneOfType([l.element, l.arrayOf(l.element)]),
+  selected: l.number,
+  style: l.object
 };
-let h = l;
+k.displayName = "TabStripContent";
 export {
-  h as TabStripContent
+  k as TabStripContent
 };

package/tabstrip/TabStripNavigation.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 { TabStripSize, ScrollButtons, ScrollButtonsPosition } from './TabStrip.js';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import * as React from 'react';
@@ -102,43 +101,4 @@ export interface TabStripNavigationProps {
      */
     itemsNavRef?: React.RefObject<HTMLUListElement | null>;
 }
-export declare class TabStripNavigation extends React.Component<TabStripNavigationProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        onKeyDown: PropTypes.Requireable<(...args: any[]) => any>;
-        onScroll: PropTypes.Requireable<(...args: any[]) => any>;
-        selected: PropTypes.Requireable<number>;
-        tabIndex: PropTypes.Requireable<number>;
-        scrollable: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<string>;
-        scrollButtons: PropTypes.Requireable<string>;
-        scrollButtonsPosition: PropTypes.Requireable<string>;
-        containerScrollPosition: PropTypes.Requireable<string | null>;
-    };
-    private itemsNavRef;
-    /**
-     * @hidden
-     */
-    componentDidMount(): void;
-    /**
-     * @hidden
-     */
-    componentDidUpdate(prevProps: Readonly<TabStripNavigationProps>): void;
-    private onScroll;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    private scrollToSelected;
-    private horizontalScroll;
-    private isRtl;
-    private arrowClickPrev;
-    private arrowClickNext;
-    private handleArrowClick;
-    private setNewScrollPosition;
-    private renderArrow;
-}
+export declare const TabStripNavigation: React.FC<TabStripNavigationProps>;

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;
-}
+}>>;