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

package/stepper/interfaces/StepperProps.d.ts

@@ -0,0 +1,216 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { StepProps } from './StepProps.js';
+import { StepperChangeEvent } from './StepperChangeEvent.js';
+import { StepperFocusEvent } from './StepperFocusEvent.js';
+import { SVGIcon } from '@progress/kendo-react-common';
+import * as React from 'react';
+/**
+ * Represents the props of the [KendoReact Stepper component](https://www.telerik.com/kendo-react-ui/components/layout/stepper).
+ */
+export interface StepperProps {
+    /**
+     * Sets the Stepper animation duration in milliseconds.
+     *
+     * @default 400
+     *
+     * @example
+     * ```jsx
+     * <Stepper animationDuration={400} />
+     * ```
+     */
+    animationDuration?: boolean | number;
+    /**
+     * Represents the child elements passed to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper>
+     *   <Step label="Step 1" />
+     *   <Step label="Step 2" />
+     * </Stepper>
+     * ```
+     */
+    children?: any;
+    /**
+     * Specifies a list of CSS classes that will be added to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper className="custom-stepper" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Represents the `dir` HTML attribute, used to switch between LTR and RTL.
+     *
+     * @example
+     * ```jsx
+     * <Stepper dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Disables the entire Stepper.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Stepper disabled />
+     * ```
+     */
+    disabled?: boolean;
+    /**
+     * Specifies a custom icon rendered inside the step for invalid steps.
+     *
+     * @example
+     * ```jsx
+     * <Stepper errorIcon="k-icon k-i-warning" />
+     * ```
+     */
+    errorIcon?: string;
+    /**
+     * Specifies a custom SVG icon rendered inside the step for invalid steps.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Stepper errorSVGIcon={gearIcon} />
+     * ```
+     */
+    errorSVGIcon?: SVGIcon;
+    /**
+     * Overrides the default component responsible for rendering a single step ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/custom_rendering)).
+     *
+     * @example
+     * ```jsx
+     * const CustomStep = (props) => <div>{props.label}</div>;
+     * <Stepper item={CustomStep} />
+     * ```
+     */
+    item?: React.ComponentType<StepProps>;
+    /**
+     * The collection of steps rendered in the Stepper ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper)).
+     *
+     * @example
+     * ```jsx
+     * <Stepper items={[{ label: 'Step 1' }, { label: 'Step 2' }]} />
+     * ```
+     */
+    items: Array<StepProps>;
+    /**
+     * Specifies whether the Stepper enforces a linear flow ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/linear_mode)).
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Stepper linear />
+     * ```
+     */
+    linear?: boolean;
+    /**
+     * Specifies the Stepper display mode ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/display_modes)).
+     *
+     * The possible values are:
+     * * (Default) `steps`&mdash;Renders step indicators and optional labels.
+     * * `labels`&mdash;Renders labels only.
+     *
+     * @default steps
+     *
+     * @example
+     * ```jsx
+     * <Stepper mode="labels" />
+     * ```
+     */
+    mode?: 'steps' | 'labels';
+    /**
+     * Specifies the Stepper orientation ([see example](https://www.telerik.com/kendo-react-ui/components/layout/stepper/orientation)).
+     *
+     * The possible values are:
+     * * (Default) `horizontal`
+     * * `vertical`
+     *
+     * @default horizontal
+     *
+     * @example
+     * ```jsx
+     * <Stepper orientation="vertical" />
+     * ```
+     */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Indicates whether the selection changes upon focus change or requires additional action (Enter or Space key press) to select the focused step.
+     *
+     * @default false
+     *
+     * @example
+     * ```jsx
+     * <Stepper selectOnFocus />
+     * ```
+     */
+    selectOnFocus?: boolean;
+    /**
+     * Sets additional CSS styles to the Stepper.
+     *
+     * @example
+     * ```jsx
+     * <Stepper style={{ backgroundColor: 'lightblue' }} />
+     * ```
+     */
+    style?: React.CSSProperties;
+    /**
+     * Specifies a custom icon rendered inside the step for valid steps.
+     *
+     * @example
+     * ```jsx
+     * <Stepper successIcon="k-icon k-i-check" />
+     * ```
+     */
+    successIcon?: string;
+    /**
+     * Specifies a custom SVG icon rendered inside the step for valid steps.
+     *
+     * @example
+     * ```jsx
+     * import { gearIcon } from '@progress/kendo-svg-icons';
+     *
+     * <Stepper successSVGIcon={gearIcon} />
+     * ```
+     */
+    successSVGIcon?: SVGIcon;
+    /**
+     * Specifies the index of the selected step.
+     *
+     * @example
+     * ```jsx
+     * <Stepper value={1} />
+     * ```
+     */
+    value: number;
+    /**
+     * Fires when the value is changed.
+     *
+     * @example
+     * ```jsx
+     * <Stepper onChange={(event) => console.log(event.value)} />
+     * ```
+     */
+    onChange?: (event: StepperChangeEvent) => void;
+    /**
+     * Fires when a step is focused.
+     *
+     * @example
+     * ```jsx
+     * <Stepper onFocus={(event) => console.log(event.step)} />
+     * ```
+     */
+    onFocus?: (event: StepperFocusEvent) => void;
+}

package/stepper/messages/index.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare const optionalText = "stepper.optionalText";
+/**
+ * @hidden
+ */
+export declare const progBarAriaLabel = "stepper.progBarAriaLabel";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "stepper.optionalText": string;
+    "stepper.progBarAriaLabel": string;
+};

package/tabstrip/TabStrip.d.ts

@@ -0,0 +1,297 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * 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';
+/**
+ * Represents the values of the size property of the TabStrip.
+ */
+export type TabStripSize = 'small' | 'medium' | 'large';
+/**
+ * Represents the values of the scrollButtons property of the TabStrip.
+ */
+export type ScrollButtons = 'auto' | 'visible' | 'hidden';
+/**
+ * Represents the values of the scrollButtonsPosition property of the TabStrip.
+ */
+export type ScrollButtonsPosition = 'split' | 'start' | 'end' | 'around' | 'before' | 'after';
+/**
+ * @hidden
+ */
+export interface TabStripScrollableProps {
+    /**
+     * Determines whether the TabStrip will be scrollable.
+     *
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Sets the tab list scroll speed in pixels when scrolling via clicking the previous or next button.
+     *
+     * @default 100
+     */
+    buttonScrollSpeed?: number;
+    /**
+     * Sets the visibility of the scroll buttons.
+     *
+     * @default `auto`
+     */
+    scrollButtons?: ScrollButtons;
+    /**
+     * Sets the scroll buttons position according to the tab list.
+     * The previous options 'around', 'before', 'after' are going to be deprecated in favor of 'split', 'start', 'end'.
+     *
+     * @default `split`
+     */
+    scrollButtonsPosition?: ScrollButtonsPosition;
+    /**
+     * Defines the custom component that will be rendered as a previous button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    prevButton?: React.ComponentType<ButtonProps>;
+    /**
+     * Defines the custom component that will be rendered as a next button.
+     * To remove the button, set a function which returns null `() => null`.
+     */
+    nextButton?: React.ComponentType<ButtonProps>;
+}
+/**
+ * The arguments that are passed to the `onSelect` callback function of the TabStrip.
+ */
+export interface TabStripSelectEventArguments {
+    /**
+     * The index of the selected TabStrip tab.
+     */
+    selected: number;
+}
+/**
+ * Represents the props of the [KendoReact TabStrip component](https://www.telerik.com/kendo-react-ui/components/layout/tabstrip).
+ */
+export interface TabStripProps extends KendoReactComponentBaseProps, TabStripScrollableProps {
+    /**
+     * Enables the tab animation.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip animation={true} />
+     * ```
+     */
+    animation?: boolean;
+    /**
+     * Sets the index of the selected TabStripTab component ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tabstrip/tabs#toc-tabs-on-initial-loading)).
+     *
+     * @example
+     * ```jsx
+     * <TabStrip selected={0} />
+     * ```
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    style?: any;
+    /**
+     * Sets the style of the TabStripContent component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabContentStyle={{ padding: '10px' }} />
+     * ```
+     */
+    tabContentStyle?: any;
+    /**
+     * Sets the position of the tabs. Defaults to `top`.
+     *
+     * The available options are:
+     * - `"top"`&mdash;Renders the `TabStripNavigation` to the top of the TabStrip.
+     * - `"bottom"`&mdash;Renders the `TabStripNavigation` to the bottom of the TabStrip.
+     * - `"left"`&mdash;Renders the `TabStripNavigation` to the left of the TabStrip.
+     * - `"right"`&mdash;Renders the `TabStripNavigation` to the right of the TabStrip.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabPosition="bottom" />
+     * ```
+     */
+    tabPosition?: string;
+    /**
+     * Sets the alignment of the tabs. Defaults to `start`.
+     *
+     * The available options are:
+     * - `"start"`&mdash;Aligns the tabs at the start of the `TabStripNavigation`.
+     * - `"center"`&mdash;Aligns the tabs in the center of the `TabStripNavigation`.
+     * - `"end"`&mdash;Aligns the tabs at the end of the `TabStripNavigation`.
+     * - `"justify"`&mdash;Justifies the tabs inside the `TabStripNavigation`.
+     * - `"stretched"`&mdash;Stretches the tabs inside the `TabStripNavigation`.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabAlignment="center" />
+     * ```
+     */
+    tabAlignment?: string;
+    /**
+     * Sets the `tabIndex` of the TabStripNavigation.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip tabIndex={0} />
+     * ```
+     */
+    tabIndex?: number;
+    /**
+     * Sets the direction of the TabStrip component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip dir="rtl" />
+     * ```
+     */
+    dir?: string;
+    /**
+     * Specifies the CSS class names of the TabStrip component.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip className="custom-class" />
+     * ```
+     */
+    className?: string;
+    /**
+     * Specifies the possible sizes of the TabStrip.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip size="small" />
+     * ```
+     */
+    size?: TabStripSize;
+    /**
+     * Defines if the tabs will remain mounted after another tab is selected. Defaults to `false`.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip keepTabsMounted={true} />
+     * ```
+     */
+    keepTabsMounted?: boolean;
+    /**
+     * @default false
+     * Defines if all component tabs will be rendered by default. Defaults to `false`.
+     * If set to `false`, the component will render only the currently selected tab. This can be useful when the content of the tabs is heavy and you want to improve the initial loading time. Check also the [keepTabsMounted](https://www.telerik.com/kendo-react-ui/components/layout/api/tabstripprops#toc-keeptabsmounted) prop.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip renderAllContent={true} />
+     * ```
+     */
+    renderAllContent?: boolean;
+    /**
+     * Fires each time the user makes a selection.
+     *
+     * @example
+     * ```jsx
+     * <TabStrip onSelect={(e) => console.log(e.selected)} />
+     * ```
+     */
+    onSelect?: (e: TabStripSelectEventArguments) => void;
+}
+/**
+ * @hidden
+ */
+export type StateScrollPosition = 'start' | 'end' | 'top' | 'bottom' | 'middle' | null;
+/**
+ * @hidden
+ */
+export interface TabStripStateProps {
+    containerScrollPosition: StateScrollPosition;
+}
+/**
+ * Represents the TabStrip component.
+ *
+ * @remarks
+ * Supported children components are: {@link TabStripTab}.
+ */
+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;
+    /**
+     * @hidden
+     */
+    onSelect: (index: any) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * @hidden
+     */
+    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> {
+}

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:"medium",renderAllContent:!1};let f=u;exports.TabStrip=f;
+"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;

package/tabstrip/TabStrip.mjs

@@ -168,7 +168,7 @@ p.propTypes = {
   mouseScrollSpeed: 10,
   scrollButtons: "auto",
   scrollButtonsPosition: "split",
-  size: "medium",
+  size: void 0,
   renderAllContent: !1
 };
 let u = p;

package/tabstrip/TabStripContent.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * 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.
+ */
+export interface TabStripContentProps {
+    /**
+     * Defines whether the content appearance will be animated.
+     */
+    animation?: boolean;
+    /**
+     * The index of the selected tab. Used to indicate which child to render.
+     */
+    selected?: number;
+    /**
+     * @hidden
+     */
+    style?: any;
+    /**
+     * @hidden
+     */
+    index?: number;
+    /**
+     * @hidden
+     */
+    keepTabsMounted?: boolean;
+    /**
+     * @hidden
+     */
+    renderAllContent?: boolean;
+    /**
+     * @hidden
+     */
+    children?: React.ReactNode;
+    /**
+     * @hidden
+     */
+    contentPanelId?: string;
+    /**
+     * @hidden
+     */
+    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;
+}