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

package/package-metadata.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 e=Object.freeze({name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770377821,version:"13.4.0-develop.5",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-layout",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1770382818,version:"14.0.0-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -8,6 +8,6 @@ export const packageMetadata = Object.freeze({
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
     publishDate: 0,
-    version: '13.4.0-develop.5',
+    version: '14.0.0-develop.1',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "13.4.0-develop.5",
+  "version": "14.0.0-develop.1",
   "description": "React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -26,12 +26,12 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-animation": "13.4.0-develop.5",
-    "@progress/kendo-react-buttons": "13.4.0-develop.5",
-    "@progress/kendo-react-common": "13.4.0-develop.5",
-    "@progress/kendo-react-intl": "13.4.0-develop.5",
-    "@progress/kendo-react-popup": "13.4.0-develop.5",
-    "@progress/kendo-react-progressbars": "13.4.0-develop.5",
+    "@progress/kendo-react-animation": "14.0.0-develop.1",
+    "@progress/kendo-react-buttons": "14.0.0-develop.1",
+    "@progress/kendo-react-common": "14.0.0-develop.1",
+    "@progress/kendo-react-intl": "14.0.0-develop.1",
+    "@progress/kendo-react-popup": "14.0.0-develop.1",
+    "@progress/kendo-react-progressbars": "14.0.0-develop.1",
     "@progress/kendo-svg-icons": "^4.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
@@ -76,7 +76,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1770377821,
+      "publishDate": 1770382818,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/tabstrip/TabStrip.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 { KendoReactComponentBaseProps } from '@progress/kendo-react-common';
 import { ButtonProps } from '@progress/kendo-react-buttons';
 import * as React from 'react';
@@ -37,6 +36,12 @@ export interface TabStripScrollableProps {
      * @default 100
      */
     buttonScrollSpeed?: number;
+    /**
+     * Sets the tab list scroll speed in pixels when scrolling via mouse wheel.
+     *
+     * @default 10
+     */
+    mouseScrollSpeed?: number;
     /**
      * Sets the visibility of the scroll buttons.
      *
@@ -166,6 +171,8 @@ export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScr
     /**
      * Specifies the possible sizes of the TabStrip.
      *
+     * @default undefined (theme-controlled)
+     *
      * @example
      * ```jsx
      * <TabStrip size="small" />
@@ -212,86 +219,13 @@ export type StateScrollPosition = 'start' | 'end' | 'top' | 'bottom' | 'middle'
 export interface TabStripStateProps {
     containerScrollPosition: StateScrollPosition;
 }
+export declare const TabStrip: React.ForwardRefExoticComponent<TabStripProps & React.RefAttributes<TabStripHandle | null>>;
 /**
- * Represents the TabStrip component.
- *
- * @remarks
- * Supported children components are: {@link TabStripTab}.
+ * Represents the `ref` of the TabStrip component.
  */
-export declare class TabStrip extends React.Component<TabStripProps, TabStripStateProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        id: PropTypes.Requireable<string>;
-        animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
-        selected: PropTypes.Requireable<number>;
-        style: PropTypes.Requireable<object>;
-        tabContentStyle: PropTypes.Requireable<object>;
-        tabPosition: PropTypes.Requireable<string>;
-        tabAlignment: PropTypes.Requireable<string>;
-        tabIndex: PropTypes.Requireable<number>;
-        className: PropTypes.Requireable<string>;
-        dir: PropTypes.Requireable<string>;
-        renderAllContent: PropTypes.Requireable<boolean>;
-        size: PropTypes.Requireable<string | null>;
-        scrollButtons: PropTypes.Requireable<string>;
-        scrollButtonsPosition: PropTypes.Requireable<string>;
-    };
-    /**
-     * @hidden
-     */
-    static defaultProps: {
-        animation: boolean;
-        tabPosition: string;
-        tabAlignment: string;
-        keepTabsMounted: boolean;
-        buttonScrollSpeed: number;
-        mouseScrollSpeed: number;
-        scrollButtons: string;
-        scrollButtonsPosition: string;
-        size: undefined;
-        renderAllContent: boolean;
-    };
-    private tabStripRef;
-    private itemsNavRef;
-    private resizeObserver?;
-    private get contentPanelId();
-    private get navItemId();
-    private navigation?;
-    constructor(props: TabStripProps);
-    /** @hidden */
-    componentDidMount(): void;
-    /** @hidden */
-    componentWillUnmount(): void;
-    private horizontalScroll;
-    /**
-     * @hidden
-     */
-    private onScroll;
+export interface TabStripHandle {
     /**
-     * @hidden
-     */
-    onSelect: (index: any) => void;
-    /**
-     * @hidden
-     */
-    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
-    /**
-     * @hidden
+     * The props of the TabStrip component.
      */
-    onKeyboardSelect: (index: number) => void;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element;
-    private renderContent;
-    private children;
-}
-/**
- * Represent the `ref` of the TabStrip component.
- */
-export interface TabStripHandle extends Pick<TabStrip, keyof TabStrip> {
+    props: TabStripProps;
 }

package/tabstrip/TabStrip.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 v=require("react"),l=require("prop-types"),S=require("./TabStripNavigation.js"),y=require("./TabStripContent.js"),b=require("@progress/kendo-react-common");function P(p){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>p[s]})}}return r.default=p,Object.freeze(r)}const d=P(v),u=class u extends d.Component{constructor(r){super(r),this.tabStripRef=d.createRef(),this.itemsNavRef=d.createRef(),this.onScroll=()=>{const s=this.horizontalScroll(),o=this.itemsNavRef.current;if(!o)return;const e=o.scrollLeft,t=o.clientWidth,i=o.scrollWidth,n=o.scrollTop,c=o.scrollHeight,h=o.clientHeight;let a=null;const g=s?i>t:c>h,m=this.props.dir==="rtl";g?s?e+t===i||(m&&t-e)===i?a="end":e===0||m&&-e===0?a="start":e>0&&e+t<i||-e>0&&t-e<i?a="middle":a=null:c-(n+h)===0?a="bottom":n===0?a="top":n>0&&c-(n+h)>0?a="middle":a=null:a=null,this.setState({containerScrollPosition:a})},this.onSelect=s=>{this.props.selected!==s&&this.props.onSelect&&this.props.onSelect({selected:s})},this.onKeyDown=s=>{this.navigation&&this.navigation.triggerKeyboardEvent(s)},this.onKeyboardSelect=s=>{const o=this.children();o&&o[s].props.disabled||this.onSelect(s)},this.renderContent=s=>{const{selected:o,children:e,tabContentStyle:t}=s,i=d.Children.count(e);return o<i&&o>-1?d.createElement(y.TabStripContent,{index:o,...s,style:t}):null},this.state={containerScrollPosition:null},this.itemsNavRef=d.createRef()}get contentPanelId(){return this.props.id+"-content-panel-id"}get navItemId(){return this.props.id+"-nav-item-id"}componentDidMount(){var o;const r=this.tabStripRef.current,s=r&&getComputedStyle(r).direction==="rtl"||!1;r&&(this.navigation=new b.Navigation({tabIndex:0,root:this.tabStripRef,rovingTabIndex:!0,focusClass:"k-focus",selectors:[".k-tabstrip .k-tabstrip-item"],keyboardEvents:{keydown:{ArrowLeft:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1,h=n!==t.elements.length-1?n+1:0;s?(t.focusNext(e),this.onKeyboardSelect(h)):(t.focusPrevious(e),this.onKeyboardSelect(c))},ArrowRight:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1,h=n!==t.elements.length-1?n+1:0;s?(t.focusPrevious(e),this.onKeyboardSelect(c)):(t.focusNext(e),this.onKeyboardSelect(h))},ArrowDown:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==t.elements.length-1?n+1:0;t.focusNext(e),this.onKeyboardSelect(c)},ArrowUp:(e,t,i)=>{i.preventDefault();const n=t.elements.indexOf(e),c=n!==0?n-1:t.elements.length-1;t.focusPrevious(e),this.onKeyboardSelect(c)},Home:(e,t,i)=>{i.preventDefault(),t.focusElement(t.first,e),this.onKeyboardSelect(0)},End:(e,t,i)=>{i.preventDefault(),t.focusElement(t.last,e),this.onKeyboardSelect(t.elements.length-1)}}}}),(o=this.navigation)==null||o.initializeRovingTab(this.props.selected),this.onScroll(),this.resizeObserver=window.ResizeObserver&&new ResizeObserver(()=>this.onScroll()),this.tabStripRef.current&&this.resizeObserver&&this.resizeObserver.observe(this.tabStripRef.current))}componentWillUnmount(){var r;(r=this.navigation)==null||r.removeFocusListener(),this.resizeObserver&&this.resizeObserver.disconnect()}horizontalScroll(){return/top|bottom/.test(this.props.tabPosition||"top")}render(){const r={itemsNavRef:this.itemsNavRef,...this.props,children:this.children(),contentPanelId:this.contentPanelId,renderAllContent:this.props.renderAllContent,navItemId:this.navItemId,onKeyDown:this.onKeyDown,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:s,scrollButtons:o,size:e,tabPosition:t,tabIndex:i}=r,n=t==="bottom",c=b.classNames("k-tabstrip k-pos-relative",{[`k-tabstrip-${b.kendoThemeMaps.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":s,"k-tabstrip-scrollable-start k-tabstrip-scrollable-end":s&&o==="visible","k-tabstrip-scrollable-start":s&&(o==="auto"||!o)&&(this.state.containerScrollPosition==="end"||this.state.containerScrollPosition==="middle"),"k-tabstrip-scrollable-end":s&&o==="auto"&&(this.state.containerScrollPosition==="start"||this.state.containerScrollPosition==="middle")},this.props.className);return d.createElement("div",{id:this.props.id,ref:this.tabStripRef,dir:this.props.dir,className:c,style:this.props.style,onScroll:this.onScroll},!n&&d.createElement(S.TabStripNavigation,{...r,tabIndex:i}),this.renderContent(r),n&&d.createElement(S.TabStripNavigation,{...r,tabIndex:i}))}children(){return d.Children.toArray(this.props.children).filter(r=>r)}};u.propTypes={id:l.string,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,renderAllContent:l.bool,size:l.oneOf(["small","medium","large",null]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"])},u.defaultProps={animation:!0,tabPosition:"top",tabAlignment:"start",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,scrollButtons:"auto",scrollButtonsPosition:"split",size:void 0,renderAllContent:!1};let f=u;exports.TabStrip=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ce=require("react"),l=require("prop-types"),ee=require("./TabStripNavigation.js"),ae=require("./TabStripContent.js"),A=require("@progress/kendo-react-common");function ue(S){const C=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(S){for(const f in S)if(f!=="default"){const b=Object.getOwnPropertyDescriptor(S,f);Object.defineProperty(C,f,b.get?b:{enumerable:!0,get:()=>S[f]})}}return C.default=S,Object.freeze(C)}const n=ue(ce),de={animation:!0,tabPosition:"top",tabAlignment:"start",keepTabsMounted:!1,buttonScrollSpeed:100,mouseScrollSpeed:10,scrollButtons:"auto",scrollButtonsPosition:"split",renderAllContent:!1},E=n.forwardRef((S,C)=>{const f={...de,...S},{id:b,animation:H,children:j,selected:u,onSelect:B,style:te,tabContentStyle:q,tabPosition:p,tabAlignment:L,tabIndex:W,className:K,dir:x,renderAllContent:O,keepTabsMounted:_,size:k,scrollable:h,scrollButtons:I,scrollButtonsPosition:F,buttonScrollSpeed:U,mouseScrollSpeed:ne,prevButton:$,nextButton:G}=f,[g,oe]=n.useState(null),se=n.useRef({props:f}),R=n.useRef(null),z=n.useRef(null),y=n.useRef(void 0),P=n.useRef(void 0),J=n.useCallback(()=>({props:f}),[f]);n.useImperativeHandle(se,J),n.useImperativeHandle(C,J);const w=n.useMemo(()=>b?b+"-content-panel-id":void 0,[b]),N=n.useMemo(()=>b?b+"-nav-item-id":void 0,[b]),v=n.useMemo(()=>n.Children.toArray(j).filter(Boolean),[j]),Q=n.useCallback(()=>/top|bottom/.test(p||"top"),[p]),T=n.useCallback(()=>{const s=Q(),i=z.current;if(!i)return;const a=i.scrollLeft,t=i.clientWidth,e=i.scrollWidth,r=i.scrollTop,o=i.scrollHeight,d=i.clientHeight;let c=null;const ie=s?e>t:o>d,Z=x==="rtl";ie?s?a+t===e||(Z&&t-a)===e?c="end":a===0||Z&&-a===0?c="start":a>0&&a+t<e||-a>0&&t-a<e?c="middle":c=null:o-(r+d)===0?c="bottom":r===0?c="top":r>0&&o-(r+d)>0?c="middle":c=null:c=null,oe(c)},[Q,x]),D=n.useCallback(s=>{u!==s&&B&&B({selected:s})},[u,B]),m=n.useCallback(s=>{var t,e;const i=v;((e=(t=i==null?void 0:i[s])==null?void 0:t.props)==null?void 0:e.disabled)||D(s)},[v,D]),V=n.useCallback(s=>{P.current&&P.current.triggerKeyboardEvent(s)},[]);n.useEffect(()=>{var a;const s=R.current,i=s&&getComputedStyle(s).direction==="rtl"||!1;return s&&(P.current=new A.Navigation({tabIndex:0,root:R,rovingTabIndex:!0,focusClass:"k-focus",selectors:[".k-tabstrip .k-tabstrip-item"],keyboardEvents:{keydown:{ArrowLeft:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),d=o!==0?o-1:e.elements.length-1,c=o!==e.elements.length-1?o+1:0;i?(e.focusNext(t),m(c)):(e.focusPrevious(t),m(d))},ArrowRight:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),d=o!==0?o-1:e.elements.length-1,c=o!==e.elements.length-1?o+1:0;i?(e.focusPrevious(t),m(d)):(e.focusNext(t),m(c))},ArrowDown:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),d=o!==e.elements.length-1?o+1:0;e.focusNext(t),m(d)},ArrowUp:(t,e,r)=>{r.preventDefault();const o=e.elements.indexOf(t),d=o!==0?o-1:e.elements.length-1;e.focusPrevious(t),m(d)},Home:(t,e,r)=>{r.preventDefault(),e.focusElement(e.first,t),m(0)},End:(t,e,r)=>{r.preventDefault(),e.focusElement(e.last,t),m(e.elements.length-1)}}}}),(a=P.current)==null||a.initializeRovingTab(u),T(),y.current=window.ResizeObserver&&new ResizeObserver(()=>T()),R.current&&y.current&&y.current.observe(R.current)),()=>{var t;(t=P.current)==null||t.removeFocusListener(),y.current&&y.current.disconnect()}},[u,m,T]);const re=n.useMemo(()=>{const s=n.Children.count(v);return u<s&&u>-1?n.createElement(ae.TabStripContent,{index:u,selected:u,contentPanelId:w,navItemId:N,animation:H,keepTabsMounted:_,renderAllContent:O,style:q},v):null},[u,v,w,N,H,_,O,q]),M=I==="hidden"||g===null&&I==="auto"?"hidden":"visible",X=n.useMemo(()=>({itemsNavRef:z,children:v,selected:u,tabIndex:W,tabPosition:p,tabAlignment:L,size:k,scrollable:h,scrollButtons:M,scrollButtonsPosition:F,buttonScrollSpeed:U,mouseScrollSpeed:ne,prevButton:$,nextButton:G,dir:x,contentPanelId:w,renderAllContent:O,navItemId:N,onKeyDown:V,onSelect:D,onScroll:T,containerScrollPosition:g}),[z,v,u,W,p,L,k,h,M,F,U,$,G,x,w,O,N,V,D,T,g]),Y=p==="bottom",le=n.useMemo(()=>A.classNames("k-tabstrip k-pos-relative",{[`k-tabstrip-${A.kendoThemeMaps.sizeMap[k||"medium"]||k}`]:k,"k-tabstrip-left":p==="left","k-tabstrip-right":p==="right","k-tabstrip-bottom":p==="bottom","k-tabstrip-top":p==="top","k-tabstrip-scrollable":h,"k-tabstrip-scrollable-start k-tabstrip-scrollable-end":h&&M==="visible","k-tabstrip-scrollable-start":h&&I==="auto"&&(g==="end"||g==="middle"),"k-tabstrip-scrollable-end":h&&I==="auto"&&(g==="start"||g==="middle")},K),[k,p,h,I,M,g,K]);return n.createElement("div",{id:b,ref:R,dir:x,className:le,style:te,onScroll:T},!Y&&n.createElement(ee.TabStripNavigation,{...X}),re,Y&&n.createElement(ee.TabStripNavigation,{...X}))});E.displayName="TabStrip";E.propTypes={id:l.string,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,renderAllContent:l.bool,size:l.oneOf(["small","medium","large"]),scrollButtons:l.oneOf(["auto","visible","hidden"]),scrollButtonsPosition:l.oneOf(["split","start","end","around","before","after"])};const be=E;exports.TabStrip=be;

package/tabstrip/TabStrip.mjs

@@ -5,144 +5,202 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as d from "react";
+import * as n from "react";
 import r from "prop-types";
-import { TabStripNavigation as f } from "./TabStripNavigation.mjs";
-import { TabStripContent as S } from "./TabStripContent.mjs";
-import { Navigation as g, classNames as v, kendoThemeMaps as x } from "@progress/kendo-react-common";
-const p = class p extends d.Component {
-  constructor(l) {
-    super(l), this.tabStripRef = d.createRef(), this.itemsNavRef = d.createRef(), 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, c = o.scrollHeight, h = o.clientHeight;
-      let a = null;
-      const m = i ? n > t : c > h, b = this.props.dir === "rtl";
-      m ? i ? e + t === n || (b && t - e) === n ? a = "end" : e === 0 || b && -e === 0 ? a = "start" : e > 0 && e + t < n || -e > 0 && t - e < n ? a = "middle" : a = null : c - (s + h) === 0 ? a = "bottom" : s === 0 ? a = "top" : s > 0 && c - (s + h) > 0 ? a = "middle" : a = null : a = null, this.setState({ containerScrollPosition: a });
-    }, this.onSelect = (i) => {
-      this.props.selected !== i && this.props.onSelect && this.props.onSelect({
-        selected: i
+import { TabStripNavigation as Y } from "./TabStripNavigation.mjs";
+import { TabStripContent as ie } from "./TabStripContent.mjs";
+import { Navigation as ce, classNames as ae, kendoThemeMaps as ue } from "@progress/kendo-react-common";
+const de = {
+  animation: !0,
+  tabPosition: "top",
+  tabAlignment: "start",
+  keepTabsMounted: !1,
+  buttonScrollSpeed: 100,
+  mouseScrollSpeed: 10,
+  scrollButtons: "auto",
+  scrollButtonsPosition: "split",
+  renderAllContent: !1
+}, E = n.forwardRef((Z, _) => {
+  const R = { ...de, ...Z }, {
+    id: m,
+    animation: H,
+    children: M,
+    selected: u,
+    onSelect: A,
+    style: ee,
+    tabContentStyle: O,
+    tabPosition: p,
+    tabAlignment: z,
+    tabIndex: L,
+    className: W,
+    dir: v,
+    renderAllContent: P,
+    keepTabsMounted: K,
+    size: h,
+    scrollable: g,
+    scrollButtons: x,
+    scrollButtonsPosition: j,
+    buttonScrollSpeed: F,
+    mouseScrollSpeed: te,
+    prevButton: U,
+    nextButton: $
+  } = R, [f, ne] = n.useState(null), oe = n.useRef({ props: R }), C = n.useRef(null), D = n.useRef(null), T = n.useRef(void 0), I = n.useRef(void 0), q = n.useCallback(() => ({ props: R }), [R]);
+  n.useImperativeHandle(oe, q), n.useImperativeHandle(_, q);
+  const y = n.useMemo(() => m ? m + "-content-panel-id" : void 0, [m]), w = n.useMemo(() => m ? m + "-nav-item-id" : void 0, [m]), S = n.useMemo(() => n.Children.toArray(M).filter(Boolean), [M]), G = n.useCallback(() => /top|bottom/.test(p || "top"), [p]), k = n.useCallback(() => {
+    const s = G(), i = D.current;
+    if (!i)
+      return;
+    const a = i.scrollLeft, t = i.clientWidth, e = i.scrollWidth, l = i.scrollTop, o = i.scrollHeight, d = i.clientHeight;
+    let c = null;
+    const re = s ? e > t : o > d, X = v === "rtl";
+    re ? s ? a + t === e || (X && t - a) === e ? c = "end" : a === 0 || X && -a === 0 ? c = "start" : a > 0 && a + t < e || -a > 0 && t - a < e ? c = "middle" : c = null : o - (l + d) === 0 ? c = "bottom" : l === 0 ? c = "top" : l > 0 && o - (l + d) > 0 ? c = "middle" : c = null : c = null, ne(c);
+  }, [G, v]), B = n.useCallback(
+    (s) => {
+      u !== s && A && A({
+        selected: s
       });
-    }, 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 = d.Children.count(e);
-      return o < n && o > -1 ? /* @__PURE__ */ d.createElement(S, { index: o, ...i, style: t }) : null;
-    }, this.state = {
-      containerScrollPosition: null
-    }, this.itemsNavRef = d.createRef();
-  }
-  get contentPanelId() {
-    return this.props.id + "-content-panel-id";
-  }
-  get navItemId() {
-    return this.props.id + "-nav-item-id";
-  }
-  /** @hidden */
-  componentDidMount() {
-    var o;
-    const l = this.tabStripRef.current, i = l && getComputedStyle(l).direction === "rtl" || !1;
-    l && (this.navigation = new g({
+    },
+    [u, A]
+  ), b = n.useCallback(
+    (s) => {
+      var t, e;
+      const i = S;
+      ((e = (t = i == null ? void 0 : i[s]) == null ? void 0 : t.props) == null ? void 0 : e.disabled) || B(s);
+    },
+    [S, B]
+  ), J = n.useCallback((s) => {
+    I.current && I.current.triggerKeyboardEvent(s);
+  }, []);
+  n.useEffect(() => {
+    var a;
+    const s = C.current, i = s && getComputedStyle(s).direction === "rtl" || !1;
+    return s && (I.current = new ce({
       tabIndex: 0,
-      root: this.tabStripRef,
+      root: C,
       rovingTabIndex: !0,
       focusClass: "k-focus",
       selectors: [".k-tabstrip .k-tabstrip-item"],
       keyboardEvents: {
         keydown: {
-          ArrowLeft: (e, t, n) => {
-            n.preventDefault();
-            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
-            i ? (t.focusNext(e), this.onKeyboardSelect(h)) : (t.focusPrevious(e), this.onKeyboardSelect(c));
+          ArrowLeft: (t, e, l) => {
+            l.preventDefault();
+            const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1, c = o !== e.elements.length - 1 ? o + 1 : 0;
+            i ? (e.focusNext(t), b(c)) : (e.focusPrevious(t), b(d));
           },
-          ArrowRight: (e, t, n) => {
-            n.preventDefault();
-            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1, h = s !== t.elements.length - 1 ? s + 1 : 0;
-            i ? (t.focusPrevious(e), this.onKeyboardSelect(c)) : (t.focusNext(e), this.onKeyboardSelect(h));
+          ArrowRight: (t, e, l) => {
+            l.preventDefault();
+            const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1, c = o !== e.elements.length - 1 ? o + 1 : 0;
+            i ? (e.focusPrevious(t), b(d)) : (e.focusNext(t), b(c));
           },
-          ArrowDown: (e, t, n) => {
-            n.preventDefault();
-            const s = t.elements.indexOf(e), c = s !== t.elements.length - 1 ? s + 1 : 0;
-            t.focusNext(e), this.onKeyboardSelect(c);
+          ArrowDown: (t, e, l) => {
+            l.preventDefault();
+            const o = e.elements.indexOf(t), d = o !== e.elements.length - 1 ? o + 1 : 0;
+            e.focusNext(t), b(d);
           },
-          ArrowUp: (e, t, n) => {
-            n.preventDefault();
-            const s = t.elements.indexOf(e), c = s !== 0 ? s - 1 : t.elements.length - 1;
-            t.focusPrevious(e), this.onKeyboardSelect(c);
+          ArrowUp: (t, e, l) => {
+            l.preventDefault();
+            const o = e.elements.indexOf(t), d = o !== 0 ? o - 1 : e.elements.length - 1;
+            e.focusPrevious(t), b(d);
           },
-          Home: (e, t, n) => {
-            n.preventDefault(), t.focusElement(t.first, e), this.onKeyboardSelect(0);
+          Home: (t, e, l) => {
+            l.preventDefault(), e.focusElement(e.first, t), b(0);
           },
-          End: (e, t, n) => {
-            n.preventDefault(), t.focusElement(t.last, e), this.onKeyboardSelect(t.elements.length - 1);
+          End: (t, e, l) => {
+            l.preventDefault(), e.focusElement(e.last, t), b(e.elements.length - 1);
           }
         }
       }
-    }), (o = this.navigation) == null || o.initializeRovingTab(this.props.selected), this.onScroll(), this.resizeObserver = window.ResizeObserver && new ResizeObserver(() => this.onScroll()), this.tabStripRef.current && this.resizeObserver && this.resizeObserver.observe(this.tabStripRef.current));
-  }
-  /** @hidden */
-  componentWillUnmount() {
-    var l;
-    (l = this.navigation) == null || l.removeFocusListener(), this.resizeObserver && this.resizeObserver.disconnect();
-  }
-  horizontalScroll() {
-    return /top|bottom/.test(this.props.tabPosition || "top");
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    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,
-      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", c = v(
-      "k-tabstrip k-pos-relative",
+    }), (a = I.current) == null || a.initializeRovingTab(u), k(), T.current = window.ResizeObserver && new ResizeObserver(() => k()), C.current && T.current && T.current.observe(C.current)), () => {
+      var t;
+      (t = I.current) == null || t.removeFocusListener(), T.current && T.current.disconnect();
+    };
+  }, [u, b, k]);
+  const se = n.useMemo(() => {
+    const s = n.Children.count(S);
+    return u < s && u > -1 ? /* @__PURE__ */ n.createElement(
+      ie,
       {
-        [`k-tabstrip-${x.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")
+        index: u,
+        selected: u,
+        contentPanelId: y,
+        navItemId: w,
+        animation: H,
+        keepTabsMounted: K,
+        renderAllContent: P,
+        style: O
       },
-      this.props.className
-    );
-    return /* @__PURE__ */ d.createElement(
-      "div",
+      S
+    ) : null;
+  }, [u, S, y, w, H, K, P, O]), N = x === "hidden" || f === null && x === "auto" ? "hidden" : "visible", Q = n.useMemo(
+    () => ({
+      itemsNavRef: D,
+      children: S,
+      selected: u,
+      tabIndex: L,
+      tabPosition: p,
+      tabAlignment: z,
+      size: h,
+      scrollable: g,
+      scrollButtons: N,
+      scrollButtonsPosition: j,
+      buttonScrollSpeed: F,
+      mouseScrollSpeed: te,
+      prevButton: U,
+      nextButton: $,
+      dir: v,
+      contentPanelId: y,
+      renderAllContent: P,
+      navItemId: w,
+      onKeyDown: J,
+      onSelect: B,
+      onScroll: k,
+      containerScrollPosition: f
+    }),
+    [
+      D,
+      S,
+      u,
+      L,
+      p,
+      z,
+      h,
+      g,
+      N,
+      j,
+      F,
+      U,
+      $,
+      v,
+      y,
+      P,
+      w,
+      J,
+      B,
+      k,
+      f
+    ]
+  ), V = p === "bottom", le = n.useMemo(
+    () => ae(
+      "k-tabstrip k-pos-relative",
       {
-        id: this.props.id,
-        ref: this.tabStripRef,
-        dir: this.props.dir,
-        className: c,
-        style: this.props.style,
-        onScroll: this.onScroll
+        [`k-tabstrip-${ue.sizeMap[h || "medium"] || h}`]: h,
+        "k-tabstrip-left": p === "left",
+        "k-tabstrip-right": p === "right",
+        "k-tabstrip-bottom": p === "bottom",
+        "k-tabstrip-top": p === "top",
+        "k-tabstrip-scrollable": g,
+        "k-tabstrip-scrollable-start k-tabstrip-scrollable-end": g && N === "visible",
+        "k-tabstrip-scrollable-start": g && x === "auto" && (f === "end" || f === "middle"),
+        "k-tabstrip-scrollable-end": g && x === "auto" && (f === "start" || f === "middle")
       },
-      !s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n }),
-      this.renderContent(l),
-      s && /* @__PURE__ */ d.createElement(f, { ...l, tabIndex: n })
-    );
-  }
-  children() {
-    return d.Children.toArray(this.props.children).filter((l) => l);
-  }
-};
-p.propTypes = {
+      W
+    ),
+    [h, p, g, x, N, f, W]
+  );
+  return /* @__PURE__ */ n.createElement("div", { id: m, ref: C, dir: v, className: le, style: ee, onScroll: k }, !V && /* @__PURE__ */ n.createElement(Y, { ...Q }), se, V && /* @__PURE__ */ n.createElement(Y, { ...Q }));
+});
+E.displayName = "TabStrip";
+E.propTypes = {
   id: r.string,
   animation: r.bool,
   children: r.node,
@@ -156,22 +214,11 @@ p.propTypes = {
   className: r.string,
   dir: r.string,
   renderAllContent: r.bool,
-  size: r.oneOf(["small", "medium", "large", null]),
+  size: r.oneOf(["small", "medium", "large"]),
   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,
-  mouseScrollSpeed: 10,
-  scrollButtons: "auto",
-  scrollButtonsPosition: "split",
-  size: void 0,
-  renderAllContent: !1
 };
-let u = p;
+const ge = E;
 export {
-  u as TabStrip
+  ge as TabStrip
 };

package/tabstrip/TabStripContent.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 to the TabStripContent by the TabStrip.
@@ -48,23 +47,4 @@ export interface TabStripContentProps {
      */
     navItemId?: string;
 }
-export declare class TabStripContent extends React.Component<TabStripContentProps, {}> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        animation: PropTypes.Requireable<boolean>;
-        children: PropTypes.Requireable<NonNullable<PropTypes.ReactElementLike | (PropTypes.ReactElementLike | null | undefined)[] | null | undefined>>;
-        selected: PropTypes.Requireable<number>;
-        style: PropTypes.Requireable<object>;
-    };
-    private contentId;
-    /**
-     * @hidden
-     */
-    render(): React.JSX.Element | React.JSX.Element[] | null | undefined;
-    private renderContent;
-    private renderAllContent;
-    private renderChild;
-    private childFactory;
-}
+export declare const TabStripContent: React.FC<TabStripContentProps>;

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