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

package/panelbar/PanelBarItem.mjs

@@ -5,128 +5,134 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
-import t from "prop-types";
-import { svgIconPropType as P, classNames as p, IconWrap as y } from "@progress/kendo-react-common";
-import { chevronUpIcon as q, chevronDownIcon as D } from "@progress/kendo-svg-icons";
-import { Reveal as F } from "@progress/kendo-react-animation";
-function K({ imageUrl: d, icon: r, svgIcon: e, iconClass: o }) {
-  return d ? /* @__PURE__ */ n.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: d }) : r || e ? /* @__PURE__ */ n.createElement(y, { className: "k-panelbar-item-icon", name: r, icon: e }) : o ? /* @__PURE__ */ n.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + o }) : null;
+import * as e from "react";
+import n from "prop-types";
+import { classNames as u, IconWrap as v, svgIconPropType as _ } from "@progress/kendo-react-common";
+import { chevronUpIcon as $, chevronDownIcon as j } from "@progress/kendo-svg-icons";
+import { Reveal as z } from "@progress/kendo-react-animation";
+function J({ imageUrl: o, icon: i, svgIcon: s, iconClass: a }) {
+  return o ? /* @__PURE__ */ e.createElement("img", { role: "presentation", className: "k-panelbar-item-icon k-image", src: o }) : i || s ? /* @__PURE__ */ e.createElement(v, { className: "k-panelbar-item-icon", name: i, icon: s }) : a ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: "k-panelbar-item-icon " + a }) : null;
 }
-const l = class l extends n.PureComponent {
-  constructor(r) {
-    super(r), this.handleItemClick = () => {
-      const { onSelect: e, disabled: o, id: c } = this.props;
-      e && !o && e.call(void 0, {
-        uniquePrivateKey: this.props.uniquePrivateKey,
-        id: c,
-        target: this
-      });
-    }, this.childFactory = (e) => this.props.keepItemsMounted ? n.cloneElement(e, {
-      ...e.props,
-      in: this.props.expanded
-    }) : e, this.state = {
-      show: r.expanded || !1
-    };
-  }
-  /**
-   * @hidden
-   */
-  render() {
-    const {
-      id: r,
-      children: e,
-      title: o,
+const f = e.forwardRef((o, i) => {
+  const {
+    id: s,
+    children: a,
+    title: E = Q.title,
+    uniquePrivateKey: c,
+    disabled: t,
+    selected: k,
+    focused: N,
+    expanded: r,
+    className: C,
+    level: b,
+    headerClassName: x,
+    animation: y,
+    keepItemsMounted: l,
+    onSelect: m,
+    imageUrl: B,
+    icon: R,
+    svgIcon: w,
+    iconClass: P
+  } = o, d = e.useRef({ props: o }), S = e.useRef(null);
+  e.useImperativeHandle(d, () => ({ props: o })), e.useImperativeHandle(
+    i,
+    () => d.current
+  );
+  const [A, g] = e.useState(r || !1), D = e.useCallback(() => {
+    m && !t && m({
       uniquePrivateKey: c,
-      disabled: a,
-      selected: m,
-      focused: E,
-      expanded: s,
-      className: g,
-      level: u,
-      headerClassName: v,
-      animation: h,
-      keepItemsMounted: i
-    } = this.props, x = {
-      role: "treeitem",
-      "aria-disabled": a,
-      "aria-hidden": !a && !s,
-      "aria-selected": !a && m,
-      "aria-expanded": !a && s && !!e
-    }, N = p(
-      "k-panelbar-item",
-      {
-        "k-panelbar-header": u === 0,
-        "k-expanded": s && !!e,
-        "k-disabled": a
-      },
-      `k-level-${u}`,
-      g
-    ), C = p(
-      "k-link",
-      {
-        "k-selected": !a && m,
-        "k-focus": E
-      },
-      v
-    ), I = { display: "block" }, w = K(this.props), A = !a && e ? /* @__PURE__ */ n.createElement(
-      y,
-      {
-        name: s ? "chevron-up" : "chevron-down",
-        icon: s ? q : D,
-        className: p("k-panelbar-toggle", s ? "k-panelbar-collapse" : "k-panelbar-expand")
-      }
-    ) : null;
-    let k = !1;
-    e && e[0] && Array.isArray(e) && (k = e[0].type === l);
-    const S = k ? /* @__PURE__ */ n.createElement(
-      "ul",
-      {
-        role: "group",
-        "aria-expanded": s,
-        "aria-hidden": !s,
-        className: "k-panelbar-group",
-        style: { display: i ? this.state.show ? "block" : "none" : "block" }
-      },
-      e
-    ) : e, b = !a && s || i ? S : null, T = (h === void 0 || h) && !a && e ? /* @__PURE__ */ n.createElement(
-      F,
-      {
-        transitionEnterDuration: 200,
-        transitionExitDuration: 200,
-        key: c + "_animation",
-        style: I,
-        children: b,
-        childFactory: i && this.childFactory,
-        unmountOnExit: !i,
-        onBeforeEnter: () => i && this.setState({ show: !0 }),
-        onAfterExited: () => i && this.setState({ show: !1 })
-      }
-    ) : b;
-    return /* @__PURE__ */ n.createElement("li", { id: r, className: N, ...x }, /* @__PURE__ */ n.createElement("span", { className: C, onClick: this.handleItemClick }, w, /* @__PURE__ */ n.createElement("span", { className: "k-panelbar-item-text" }, o), A), T);
-  }
-};
-l.propTypes = {
-  animation: t.bool,
-  children: t.any,
-  className: t.string,
-  icon: t.string,
-  iconClass: t.string,
-  imageUrl: t.string,
-  svgIcon: P,
-  expanded: t.bool,
-  disabled: t.bool,
-  onSelect: t.func,
-  selected: t.bool,
-  level: t.number,
-  title: t.oneOfType([t.string, t.element]),
-  id: t.oneOfType([t.string, t.number]),
-  focused: t.bool,
-  keepItemsMounted: t.bool
-}, l.defaultProps = {
+      id: s,
+      target: d.current
+    });
+  }, [m, t, c, s]), T = e.useCallback(
+    (p) => l ? e.cloneElement(p, {
+      ...p.props,
+      in: r
+    }) : p,
+    [l, r]
+  ), U = e.useCallback(() => {
+    l && g(!0);
+  }, [l]), H = e.useCallback(() => {
+    l && g(!1);
+  }, [l]), L = {
+    role: "treeitem",
+    "aria-disabled": t,
+    "aria-hidden": !t && !r ? "true" : "false",
+    "aria-selected": !t && k,
+    "aria-expanded": !t && r && !!a
+  }, O = u(
+    "k-panelbar-item",
+    {
+      "k-panelbar-header": b === 0,
+      "k-expanded": r && !!a,
+      "k-disabled": t
+    },
+    `k-level-${b}`,
+    C
+  ), F = u(
+    "k-link",
+    {
+      "k-selected": !t && k,
+      "k-focus": N
+    },
+    x
+  ), K = { display: "block" }, M = J({ imageUrl: B, icon: R, svgIcon: w, iconClass: P }), q = !t && a ? /* @__PURE__ */ e.createElement(
+    v,
+    {
+      name: r ? "chevron-up" : "chevron-down",
+      icon: r ? $ : j,
+      className: u("k-panelbar-toggle", r ? "k-panelbar-collapse" : "k-panelbar-expand")
+    }
+  ) : null;
+  let I = !1;
+  a && a[0] && Array.isArray(a) && (I = a[0].type === f);
+  const G = l && !A ? "none" : "block", h = !t && r || l ? I ? /* @__PURE__ */ e.createElement(
+    "ul",
+    {
+      role: "group",
+      "aria-hidden": r ? "false" : "true",
+      className: "k-panelbar-group",
+      style: { display: G }
+    },
+    a
+  ) : a : null, W = (y === void 0 || y) && !t && a ? /* @__PURE__ */ e.createElement(
+    z,
+    {
+      transitionEnterDuration: 200,
+      transitionExitDuration: 200,
+      key: c + "_animation",
+      style: K,
+      children: h,
+      childFactory: l ? T : void 0,
+      unmountOnExit: !l,
+      onBeforeEnter: U,
+      onAfterExited: H
+    }
+  ) : h;
+  return /* @__PURE__ */ e.createElement("li", { ref: S, id: s, className: O, ...L }, /* @__PURE__ */ e.createElement("span", { className: F, onClick: D }, M, /* @__PURE__ */ e.createElement("span", { className: "k-panelbar-item-text" }, E), q), W);
+}), Q = {
   title: "Untitled"
 };
-let f = l;
+f.propTypes = {
+  animation: n.bool,
+  children: n.any,
+  className: n.string,
+  icon: n.string,
+  iconClass: n.string,
+  imageUrl: n.string,
+  svgIcon: _,
+  expanded: n.bool,
+  disabled: n.bool,
+  onSelect: n.func,
+  selected: n.bool,
+  level: n.number,
+  title: n.oneOfType([n.string, n.element]),
+  id: n.oneOfType([n.string, n.number]),
+  focused: n.bool,
+  keepItemsMounted: n.bool
+};
+f.displayName = "KendoReactPanelBarItem";
 export {
-  f as PanelBarItem
+  f as PanelBarItem,
+  Q as panelBarItemDefaultProps
 };

package/panelbar/interfaces/PanelBarItemClickEventArguments.d.ts

@@ -5,11 +5,11 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { PanelBarItem } from '../PanelBarItem.js';
+import * as React from 'react';
 /**
  * @hidden
  */
 export interface PanelBarItemClickEventArguments {
     uniquePrivateKey: number;
-    target: PanelBarItem;
+    target: React.ReactElement;
 }

package/panelbar/interfaces/PanelBarItemHandle.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { PanelBarItemProps } from './PanelBarItemProps.js';
+/**
+ * Represents the handle of the PanelBarItem component.
+ */
+export interface PanelBarItemHandle {
+    /**
+     * The props of the PanelBarItem component.
+     */
+    props: PanelBarItemProps;
+}

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;