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

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;

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