@progress/kendo-react-layout 8.1.0-develop.2 → 8.1.0-develop.20

package/index.d.mts

@@ -2715,7 +2715,7 @@ export declare interface MenuItemProps extends BaseMenuItem {
 /**
  * The properties of the [KendoReact Menu component]({% slug overview_menu %}).
  */
-declare interface MenuProps {
+export declare interface MenuProps {
     /**
      * Specifies whether the Menu will be vertical ([see example]({% slug vertical_menu %})).
      */
@@ -2944,7 +2944,7 @@ export declare interface PanelBarItemProps {
     /**
      * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
      */
-    children?: React.ReactNode;
+    children?: any;
     /**
      * The class name that is set to the PanelBarItem component.
      */
@@ -3232,10 +3232,14 @@ export declare class Splitter extends React_2.Component<SplitterProps, SplitterS
  */
 export declare class SplitterBar extends React_2.Component<SplitterBarProps, SplitterBarState> {
     private draggable;
+    private spliterBarRef;
+    private navigation?;
     private get isStatic();
     private get isDraggable();
     private get isHorizontal();
     constructor(props: SplitterBarProps);
+    /** @hidden */
+    componentDidMount(): void;
     render(): JSX_2.Element;
     private onDrag;
     private onFocus;
@@ -3815,12 +3819,16 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
         mouseScrollSpeed: number;
         renderAllContent: boolean;
     };
-    private _element;
+    private tabStripRef;
     private get contentPanelId();
     private get navItemId();
     private showLicenseWatermark;
-    private keyBinding;
+    private navigation?;
     constructor(props: TabStripProps);
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -3828,17 +3836,16 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
     /**
      * @hidden
      */
-    onKeyDown: (event: any) => void;
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * @hidden
+     */
+    onKeyboardSelect: (index: number) => void;
     /**
      * @hidden
      */
     render(): JSX_2.Element;
     private renderContent;
-    private invertKeys;
-    private firstNavigatableTab;
-    private lastNavigatableTab;
-    private prevNavigatableTab;
-    private nextNavigatableTab;
     private children;
 }
 

package/index.d.ts

@@ -2715,7 +2715,7 @@ export declare interface MenuItemProps extends BaseMenuItem {
 /**
  * The properties of the [KendoReact Menu component]({% slug overview_menu %}).
  */
-declare interface MenuProps {
+export declare interface MenuProps {
     /**
      * Specifies whether the Menu will be vertical ([see example]({% slug vertical_menu %})).
      */
@@ -2944,7 +2944,7 @@ export declare interface PanelBarItemProps {
     /**
      * Can be any of PanelBar items, an array of PanelBar items, or a custom component.
      */
-    children?: React.ReactNode;
+    children?: any;
     /**
      * The class name that is set to the PanelBarItem component.
      */
@@ -3232,10 +3232,14 @@ export declare class Splitter extends React_2.Component<SplitterProps, SplitterS
  */
 export declare class SplitterBar extends React_2.Component<SplitterBarProps, SplitterBarState> {
     private draggable;
+    private spliterBarRef;
+    private navigation?;
     private get isStatic();
     private get isDraggable();
     private get isHorizontal();
     constructor(props: SplitterBarProps);
+    /** @hidden */
+    componentDidMount(): void;
     render(): JSX_2.Element;
     private onDrag;
     private onFocus;
@@ -3815,12 +3819,16 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
         mouseScrollSpeed: number;
         renderAllContent: boolean;
     };
-    private _element;
+    private tabStripRef;
     private get contentPanelId();
     private get navItemId();
     private showLicenseWatermark;
-    private keyBinding;
+    private navigation?;
     constructor(props: TabStripProps);
+    /** @hidden */
+    componentDidMount(): void;
+    /** @hidden */
+    componentWillUnmount(): void;
     /**
      * @hidden
      */
@@ -3828,17 +3836,16 @@ export declare class TabStripClassComponent extends React_2.Component<TabStripPr
     /**
      * @hidden
      */
-    onKeyDown: (event: any) => void;
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLElement>) => void;
+    /**
+     * @hidden
+     */
+    onKeyboardSelect: (index: number) => void;
     /**
      * @hidden
      */
     render(): JSX_2.Element;
     private renderContent;
-    private invertKeys;
-    private firstNavigatableTab;
-    private lastNavigatableTab;
-    private prevNavigatableTab;
-    private nextNavigatableTab;
     private children;
 }
 

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-layout",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1716789940,
+  publishDate: 1718871469,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-layout",
-  "version": "8.1.0-develop.2",
+  "version": "8.1.0-develop.20",
   "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",
@@ -23,11 +23,11 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "8.1.0-develop.2",
-    "@progress/kendo-react-common": "8.1.0-develop.2",
-    "@progress/kendo-react-intl": "8.1.0-develop.2",
-    "@progress/kendo-react-popup": "8.1.0-develop.2",
-    "@progress/kendo-react-progressbars": "8.1.0-develop.2",
+    "@progress/kendo-react-animation": "8.1.0-develop.20",
+    "@progress/kendo-react-common": "8.1.0-develop.20",
+    "@progress/kendo-react-intl": "8.1.0-develop.20",
+    "@progress/kendo-react-popup": "8.1.0-develop.20",
+    "@progress/kendo-react-progressbars": "8.1.0-develop.20",
     "@progress/kendo-svg-icons": "^3.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"

package/splitter/SplitterBar.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),r=require("@progress/kendo-react-common"),a=require("@progress/kendo-svg-icons");function u(c){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(o,t,e.get?e:{enumerable:!0,get:()=>c[t]})}}return o.default=c,Object.freeze(o)}const n=u(d);class f extends n.Component{constructor(o){super(o),this.draggable=null,this.onDrag=(t,e,l)=>{const{event:s}=t,{onDrag:i,index:p}=this.props,h=this.draggable&&this.draggable.element;h&&!this.isStatic&&this.isDraggable&&i(s,h,p,e,l)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=t=>{const{onToggle:e,index:l,prev:s,next:i}=this.props;(s.collapsible||i.collapsible)&&e(s.collapsible?l:l+1,t)},this.onPrevToggle=t=>{const{onToggle:e,index:l,prev:s}=this.props;s.collapsible&&e(l,t)},this.onNextToggle=t=>{const{onToggle:e,index:l,next:s}=this.props;s.collapsible&&e(l+1,t)},this.onKeyDown=t=>{const e=t&&t.keyCode,l=this.isHorizontal,{index:s}=this.props,i=this.draggable&&this.draggable.element,p=(h,g,b)=>{t.preventDefault(),this.props.onKeyboardResize(h,g,b,t)};i&&(e===r.Keys.enter?(t.preventDefault(),this.onToggle(t)):this.isDraggable&&(l&&e===r.Keys.left?p(i,s,-10):l&&e===r.Keys.right?p(i,s,10):!l&&e===r.Keys.up?p(i,s,-10):!l&&e===r.Keys.down&&p(i,s,10)))},this.state={focused:!1}}get isStatic(){const{prev:o,next:t}=this.props,e=o.resizable&&t.resizable,l=o.collapsible||t.collapsible;return!e&&!l}get isDraggable(){const{prev:o,next:t}=this.props,e=o.resizable&&t.resizable,l=o.collapsed||t.collapsed;return!!e&&!l}get isHorizontal(){return this.props.orientation==="horizontal"}render(){const o=this.isDraggable,t=this.isStatic,e=this.isHorizontal,l=r.classNames("k-splitbar",{"k-focus":this.state.focused,"k-splitbar-horizontal":e,"k-splitbar-vertical":!e,"k-splitbar-draggable-horizontal":e&&o,"k-splitbar-draggable-vertical":!e&&o,"k-splitbar-static-horizontal":e&&t,"k-splitbar-static-vertical":!e&&t});return n.createElement(r.Draggable,{onPress:s=>this.onDrag(s,!0,!1),onDrag:s=>this.onDrag(s,!1,!1),onRelease:s=>this.onDrag(s,!1,!0),ref:s=>{this.draggable=s}},n.createElement("div",{tabIndex:t?-1:0,role:"separator","aria-valuenow":0,"aria-label":this.props.ariaLabel,"aria-orientation":e?"vertical":void 0,className:l,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&n.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},n.createElement(r.IconWrap,{name:this.props.prev.collapsible?e?this.props.prev.collapsed?this.props.isRtl?"caret-alt-left":"caret-alt-right":this.props.isRtl?"caret-alt-right":"caret-alt-left":this.props.prev.collapsed?"caret-alt-down":"caret-alt-up":void 0,icon:this.props.prev.collapsible?e?this.props.prev.collapsed?this.props.isRtl?a.caretAltLeftIcon:a.caretAltRightIcon:this.props.isRtl?a.caretAltRightIcon:a.caretAltLeftIcon:this.props.prev.collapsed?a.caretAltDownIcon:a.caretAltUpIcon:void 0,size:"xsmall"})),n.createElement("div",{className:"k-resize-handle"}),this.props.next.collapsible&&n.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},n.createElement(r.IconWrap,{name:this.props.next.collapsible?e?this.props.next.collapsed?this.props.isRtl?"caret-alt-right":"caret-alt-left":this.props.isRtl?"caret-alt-left":"caret-alt-right":this.props.next.collapsed?"caret-alt-up":"caret-alt-down":void 0,icon:this.props.next.collapsible?e?this.props.next.collapsed?this.props.isRtl?a.caretAltRightIcon:a.caretAltLeftIcon:this.props.isRtl?a.caretAltLeftIcon:a.caretAltRightIcon:this.props.next.collapsed?a.caretAltUpIcon:a.caretAltDownIcon:void 0,size:"xsmall"}))))}}exports.SplitterBar=f;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("react"),p=require("@progress/kendo-react-common"),l=require("@progress/kendo-svg-icons");function b(c){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const s in c)if(s!=="default"){const e=Object.getOwnPropertyDescriptor(c,s);Object.defineProperty(a,s,e.get?e:{enumerable:!0,get:()=>c[s]})}}return a.default=c,Object.freeze(a)}const r=b(h);class d extends r.Component{constructor(a){super(a),this.draggable=null,this.spliterBarRef=r.createRef(),this.onDrag=(s,e,o)=>{const{event:i}=s,{onDrag:n,index:t}=this.props,g=this.draggable&&this.draggable.element;g&&!this.isStatic&&this.isDraggable&&n(i,g,t,e,o)},this.onFocus=()=>{this.setState({focused:!0})},this.onBlur=()=>{this.setState({focused:!1})},this.onToggle=s=>{const{onToggle:e,index:o,prev:i,next:n}=this.props;(i.collapsible||n.collapsible)&&e(i.collapsible?o:o+1,s)},this.onPrevToggle=s=>{const{onToggle:e,index:o,prev:i}=this.props;i.collapsible&&e(o,s)},this.onNextToggle=s=>{const{onToggle:e,index:o,next:i}=this.props;i.collapsible&&e(o+1,s)},this.onKeyDown=s=>{this.navigation.triggerKeyboardEvent(s)},this.state={focused:!1}}get isStatic(){const{prev:a,next:s}=this.props,e=a.resizable&&s.resizable,o=a.collapsible||s.collapsible;return!e&&!o}get isDraggable(){const{prev:a,next:s}=this.props,e=a.resizable&&s.resizable,o=a.collapsed||s.collapsed;return!!e&&!o}get isHorizontal(){return this.props.orientation==="horizontal"}componentDidMount(){const a=this.draggable&&this.draggable.element,{index:s,onKeyboardResize:e}=this.props,o=this.isHorizontal;a&&(this.navigation=new p.Navigation({tabIndex:0,root:this.spliterBarRef,selectors:[".k-splitter .k-splitbar"],keyboardEvents:{keydown:{ArrowLeft:(i,n,t)=>{o&&(t.preventDefault(),this.isDraggable&&e(a,s,-10,t),(t.metaKey||t.ctrlKey)&&(e(a,s,0,t),this.isDraggable?this.onPrevToggle(t):this.onNextToggle(t)))},ArrowRight:(i,n,t)=>{o&&(t.preventDefault(),this.isDraggable&&e(a,s,10,t),(t.metaKey||t.ctrlKey)&&(e(a,s,0,t),this.isDraggable?this.onNextToggle(t):this.onPrevToggle(t)))},ArrowDown:(i,n,t)=>{o||(t.preventDefault(),this.isDraggable&&e(a,s,10,t),(t.metaKey||t.ctrlKey)&&(e(a,s,0,t),this.isDraggable?this.onNextToggle(t):this.onPrevToggle(t)))},ArrowUp:(i,n,t)=>{o||(t.preventDefault(),this.isDraggable&&e(a,s,-10,t),(t.metaKey||t.ctrlKey)&&(e(a,s,0,t),this.isDraggable?this.onPrevToggle(t):this.onNextToggle(t)))},Enter:(i,n,t)=>{t.preventDefault(),this.onToggle(t)}}}}))}render(){const a=this.isDraggable,s=this.isStatic,e=this.isHorizontal,o=p.classNames("k-splitbar",{"k-focus":this.state.focused,"k-splitbar-horizontal":e,"k-splitbar-vertical":!e,"k-splitbar-draggable-horizontal":e&&a,"k-splitbar-draggable-vertical":!e&&a,"k-splitbar-static-horizontal":e&&s,"k-splitbar-static-vertical":!e&&s});return r.createElement(p.Draggable,{onPress:i=>this.onDrag(i,!0,!1),onDrag:i=>this.onDrag(i,!1,!1),onRelease:i=>this.onDrag(i,!1,!0),ref:i=>{this.draggable=i}},r.createElement("div",{ref:this.spliterBarRef,tabIndex:s?-1:0,role:"separator","aria-valuenow":0,"aria-label":this.props.ariaLabel,"aria-orientation":e?"vertical":void 0,className:o,style:{touchAction:"none"},onFocus:this.onFocus,onBlur:this.onBlur,onDoubleClick:this.onToggle,onKeyDown:this.onKeyDown},this.props.prev.collapsible&&r.createElement("div",{className:"k-collapse-prev",onClick:this.onPrevToggle},r.createElement(p.IconWrap,{name:this.props.prev.collapsible?e?this.props.prev.collapsed?this.props.isRtl?"caret-alt-left":"caret-alt-right":this.props.isRtl?"caret-alt-right":"caret-alt-left":this.props.prev.collapsed?"caret-alt-down":"caret-alt-up":void 0,icon:this.props.prev.collapsible?e?this.props.prev.collapsed?this.props.isRtl?l.caretAltLeftIcon:l.caretAltRightIcon:this.props.isRtl?l.caretAltRightIcon:l.caretAltLeftIcon:this.props.prev.collapsed?l.caretAltDownIcon:l.caretAltUpIcon:void 0,size:"xsmall"})),r.createElement("div",{className:"k-resize-handle"}),this.props.next.collapsible&&r.createElement("div",{className:"k-collapse-next",onClick:this.onNextToggle},r.createElement(p.IconWrap,{name:this.props.next.collapsible?e?this.props.next.collapsed?this.props.isRtl?"caret-alt-right":"caret-alt-left":this.props.isRtl?"caret-alt-left":"caret-alt-right":this.props.next.collapsed?"caret-alt-up":"caret-alt-down":void 0,icon:this.props.next.collapsible?e?this.props.next.collapsed?this.props.isRtl?l.caretAltRightIcon:l.caretAltLeftIcon:this.props.isRtl?l.caretAltLeftIcon:l.caretAltRightIcon:this.props.next.collapsed?l.caretAltUpIcon:l.caretAltDownIcon:void 0,size:"xsmall"}))))}}exports.SplitterBar=d;

package/splitter/SplitterBar.mjs

@@ -6,14 +6,14 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as a from "react";
-import { Keys as n, classNames as m, Draggable as v, IconWrap as g } from "@progress/kendo-react-common";
-import { caretAltLeftIcon as c, caretAltRightIcon as h, caretAltDownIcon as b, caretAltUpIcon as d } from "@progress/kendo-svg-icons";
-class k extends a.Component {
-  constructor(o) {
-    super(o), this.draggable = null, this.onDrag = (t, e, l) => {
-      const { event: s } = t, { onDrag: i, index: r } = this.props, p = this.draggable && this.draggable.element;
-      p && !this.isStatic && this.isDraggable && i(s, p, r, e, l);
+import * as o from "react";
+import { Navigation as d, classNames as f, Draggable as u, IconWrap as g } from "@progress/kendo-react-common";
+import { caretAltLeftIcon as n, caretAltRightIcon as p, caretAltDownIcon as h, caretAltUpIcon as b } from "@progress/kendo-svg-icons";
+class v extends o.Component {
+  constructor(a) {
+    super(a), this.draggable = null, this.spliterBarRef = o.createRef(), this.onDrag = (s, e, l) => {
+      const { event: i } = s, { onDrag: r, index: t } = this.props, c = this.draggable && this.draggable.element;
+      c && !this.isStatic && this.isDraggable && r(i, c, t, e, l);
     }, this.onFocus = () => {
       this.setState({
         focused: !0
@@ -22,62 +22,88 @@ class k extends a.Component {
       this.setState({
         focused: !1
       });
-    }, this.onToggle = (t) => {
-      const { onToggle: e, index: l, prev: s, next: i } = this.props;
-      (s.collapsible || i.collapsible) && e(s.collapsible ? l : l + 1, t);
-    }, this.onPrevToggle = (t) => {
-      const { onToggle: e, index: l, prev: s } = this.props;
-      s.collapsible && e(l, t);
-    }, this.onNextToggle = (t) => {
-      const { onToggle: e, index: l, next: s } = this.props;
-      s.collapsible && e(l + 1, t);
-    }, this.onKeyDown = (t) => {
-      const e = t && t.keyCode, l = this.isHorizontal, { index: s } = this.props, i = this.draggable && this.draggable.element, r = (p, f, u) => {
-        t.preventDefault(), this.props.onKeyboardResize(p, f, u, t);
-      };
-      i && (e === n.enter ? (t.preventDefault(), this.onToggle(t)) : this.isDraggable && (l && e === n.left ? r(i, s, -10) : l && e === n.right ? r(i, s, 10) : !l && e === n.up ? r(i, s, -10) : !l && e === n.down && r(i, s, 10)));
+    }, this.onToggle = (s) => {
+      const { onToggle: e, index: l, prev: i, next: r } = this.props;
+      (i.collapsible || r.collapsible) && e(i.collapsible ? l : l + 1, s);
+    }, this.onPrevToggle = (s) => {
+      const { onToggle: e, index: l, prev: i } = this.props;
+      i.collapsible && e(l, s);
+    }, this.onNextToggle = (s) => {
+      const { onToggle: e, index: l, next: i } = this.props;
+      i.collapsible && e(l + 1, s);
+    }, this.onKeyDown = (s) => {
+      this.navigation.triggerKeyboardEvent(s);
     }, this.state = {
       focused: !1
     };
   }
   get isStatic() {
-    const { prev: o, next: t } = this.props, e = o.resizable && t.resizable, l = o.collapsible || t.collapsible;
+    const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, l = a.collapsible || s.collapsible;
     return !e && !l;
   }
   get isDraggable() {
-    const { prev: o, next: t } = this.props, e = o.resizable && t.resizable, l = o.collapsed || t.collapsed;
+    const { prev: a, next: s } = this.props, e = a.resizable && s.resizable, l = a.collapsed || s.collapsed;
     return !!e && !l;
   }
   get isHorizontal() {
     return this.props.orientation === "horizontal";
   }
+  /** @hidden */
+  componentDidMount() {
+    const a = this.draggable && this.draggable.element, { index: s, onKeyboardResize: e } = this.props, l = this.isHorizontal;
+    a && (this.navigation = new d({
+      tabIndex: 0,
+      root: this.spliterBarRef,
+      selectors: [".k-splitter .k-splitbar"],
+      keyboardEvents: {
+        keydown: {
+          ArrowLeft: (i, r, t) => {
+            l && (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
+          },
+          ArrowRight: (i, r, t) => {
+            l && (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
+          },
+          ArrowDown: (i, r, t) => {
+            l || (t.preventDefault(), this.isDraggable && e(a, s, 10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onNextToggle(t) : this.onPrevToggle(t)));
+          },
+          ArrowUp: (i, r, t) => {
+            l || (t.preventDefault(), this.isDraggable && e(a, s, -10, t), (t.metaKey || t.ctrlKey) && (e(a, s, 0, t), this.isDraggable ? this.onPrevToggle(t) : this.onNextToggle(t)));
+          },
+          Enter: (i, r, t) => {
+            t.preventDefault(), this.onToggle(t);
+          }
+        }
+      }
+    }));
+  }
   render() {
-    const o = this.isDraggable, t = this.isStatic, e = this.isHorizontal, l = m(
+    const a = this.isDraggable, s = this.isStatic, e = this.isHorizontal, l = f(
       "k-splitbar",
       {
         "k-focus": this.state.focused,
         "k-splitbar-horizontal": e,
         "k-splitbar-vertical": !e,
-        "k-splitbar-draggable-horizontal": e && o,
-        "k-splitbar-draggable-vertical": !e && o,
-        "k-splitbar-static-horizontal": e && t,
-        "k-splitbar-static-vertical": !e && t
+        "k-splitbar-draggable-horizontal": e && a,
+        "k-splitbar-draggable-vertical": !e && a,
+        "k-splitbar-static-horizontal": e && s,
+        "k-splitbar-static-vertical": !e && s
       }
     );
-    return /* @__PURE__ */ a.createElement(
-      v,
+    return /* @__PURE__ */ o.createElement(
+      u,
       {
-        onPress: (s) => this.onDrag(s, !0, !1),
-        onDrag: (s) => this.onDrag(s, !1, !1),
-        onRelease: (s) => this.onDrag(s, !1, !0),
-        ref: (s) => {
-          this.draggable = s;
+        onPress: (i) => this.onDrag(i, !0, !1),
+        onDrag: (i) => this.onDrag(i, !1, !1),
+        onRelease: (i) => this.onDrag(i, !1, !0),
+        ref: (i) => {
+          this.draggable = i;
         }
       },
-      /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ o.createElement(
         "div",
         {
-          tabIndex: t ? -1 : 0,
+          ref: this.spliterBarRef,
+          tabIndex: s ? -1 : 0,
           role: "separator",
           "aria-valuenow": 0,
           "aria-label": this.props.ariaLabel,
@@ -89,33 +115,33 @@ class k extends a.Component {
           onDoubleClick: this.onToggle,
           onKeyDown: this.onKeyDown
         },
-        this.props.prev.collapsible && /* @__PURE__ */ a.createElement(
+        this.props.prev.collapsible && /* @__PURE__ */ o.createElement(
           "div",
           {
             className: "k-collapse-prev",
             onClick: this.onPrevToggle
           },
-          /* @__PURE__ */ a.createElement(
+          /* @__PURE__ */ o.createElement(
             g,
             {
               name: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.prev.collapsed ? "caret-alt-down" : "caret-alt-up" : void 0,
-              icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? c : h : this.props.isRtl ? h : c : this.props.prev.collapsed ? b : d : void 0,
+              icon: this.props.prev.collapsible ? e ? this.props.prev.collapsed ? this.props.isRtl ? n : p : this.props.isRtl ? p : n : this.props.prev.collapsed ? h : b : void 0,
               size: "xsmall"
             }
           )
         ),
-        /* @__PURE__ */ a.createElement("div", { className: "k-resize-handle" }),
-        this.props.next.collapsible && /* @__PURE__ */ a.createElement(
+        /* @__PURE__ */ o.createElement("div", { className: "k-resize-handle" }),
+        this.props.next.collapsible && /* @__PURE__ */ o.createElement(
           "div",
           {
             className: "k-collapse-next",
             onClick: this.onNextToggle
           },
-          /* @__PURE__ */ a.createElement(
+          /* @__PURE__ */ o.createElement(
             g,
             {
               name: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? "caret-alt-right" : "caret-alt-left" : this.props.isRtl ? "caret-alt-left" : "caret-alt-right" : this.props.next.collapsed ? "caret-alt-up" : "caret-alt-down" : void 0,
-              icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? h : c : this.props.isRtl ? c : h : this.props.next.collapsed ? d : b : void 0,
+              icon: this.props.next.collapsible ? e ? this.props.next.collapsed ? this.props.isRtl ? p : n : this.props.isRtl ? n : p : this.props.next.collapsed ? b : h : void 0,
               size: "xsmall"
             }
           )
@@ -125,5 +151,5 @@ class k extends a.Component {
   }
 }
 export {
-  k as SplitterBar
+  v as SplitterBar
 };

package/stepper/Step.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const te=require("react"),n=require("prop-types"),ne=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ae=require("@progress/kendo-react-intl"),D=require("@progress/kendo-svg-icons"),L=require("./contants.js"),P=require("./messages/index.js");function se(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const m=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(p,l,m.get?m:{enumerable:!0,get:()=>s[l]})}}return p.default=s,Object.freeze(p)}const e=se(te),v=e.forwardRef((s,p)=>{const{children:l,className:m,current:I,disabled:o,focused:g,icon:b,svgIcon:M,index:a,isValid:t,label:i,optional:k,style:T,tabIndex:q,text:F,..._}=s,{animationDuration:N,isVertical:x,item:z,linear:V,mode:R,numOfSteps:r,value:u,onChange:E,onFocus:C,successIcon:w,errorIcon:H,successSVGIcon:W,errorSVGIcon:$}=e.useContext(ne.StepperContext),f=e.useRef(null),A=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),S=e.useCallback(()=>({element:f.current,focus:A}),[A]);e.useImperativeHandle(p,S);const h=!V||a===u-1||a===u||a===u+1,y=R==="labels"||!!b&&!!i,B=ae.useLocalization(),G=(d=>B.toLanguageString(d,P.messages[d]))(P.optionalText),U=typeof N=="number"?N:N!==!1?L.DEFAULT_ANIMATION_DURATION:L.NO_ANIMATION,K=e.useCallback(d=>{E&&!o&&c.dispatchEvent(E,d,S(),{value:a})},[E,u,o]),J=e.useCallback(d=>{C&&!o&&c.dispatchEvent(C,d,S(),void 0)},[C,o]),Q=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<u,"k-step-current":I,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t},{"k-disabled":o,"k-focus":g},m),[a,r,u,I,k,o,g,t,m]),X=e.useMemo(()=>({maxWidth:x?void 0:`calc(100% / ${r})`,maxHeight:x?`calc(100% / ${r})`:void 0,pointerEvents:h?void 0:"none",...T}),[x,r,T,h]),j=t?w:H,O=j?e.createElement("span",{className:"k-step-indicator-icon "+j,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?W||D.checkOutlineIcon:$||D.exclamationCircleIcon}),Y=e.createElement(e.Fragment,null,R!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:U+"ms"}},b||M?!y&&t!==void 0?O:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?O:e.createElement("span",{className:"k-step-indicator-text"},F||a+1)):null),Z=(i||y||k)&&e.createElement("span",{className:"k-step-label"},i&&e.createElement("span",{className:"k-step-text"},i),y&&t!==void 0&&O,k&&e.createElement("span",{className:"k-step-label-optional"},G)),ee=e.createElement(e.Fragment,null,Y,Z);return e.createElement("li",{ref:f,className:Q,style:X,..._},e.createElement("a",{className:"k-step-link",title:i||void 0,onClick:K,onFocus:J,tabIndex:q||(g?0:-1),"aria-current":I,"aria-disabled":o||!h||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?l:ee))});v.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const oe={tabIndex:0};v.defaultProps=oe;v.displayName="KendoStep";exports.Step=v;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ee=require("react"),n=require("prop-types"),te=require("./context/StepperContext.js"),c=require("@progress/kendo-react-common"),ne=require("@progress/kendo-react-intl"),j=require("@progress/kendo-svg-icons"),D=require("./contants.js"),L=require("./messages/index.js");function ae(s){const p=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const l in s)if(l!=="default"){const m=Object.getOwnPropertyDescriptor(s,l);Object.defineProperty(p,l,m.get?m:{enumerable:!0,get:()=>s[l]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),v=e.forwardRef((s,p)=>{const{children:l,className:m,current:I,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:i,optional:k,style:T,tabIndex:oe,text:q,...P}=s,{animationDuration:g,isVertical:N,item:_,linear:z,mode:F,numOfSteps:r,value:u,onChange:x,onFocus:E,successIcon:V,errorIcon:w,successSVGIcon:H,errorSVGIcon:W}=e.useContext(te.StepperContext),f=e.useRef(null),R=e.useCallback(()=>{f.current&&c.focusFirstFocusableChild(f.current)},[]),C=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,C);const S=!z||a===u-1||a===u||a===u+1,h=F==="labels"||!!b&&!!i,$=ne.useLocalization(),B=(d=>$.toLanguageString(d,L.messages[d]))(L.optionalText),G=typeof g=="number"?g:g!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(d=>{x&&!o&&c.dispatchEvent(x,d,C(),{value:a})},[x,u,o]),K=e.useCallback(d=>{E&&!o&&c.dispatchEvent(E,d,C(),void 0)},[E,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<u,"k-step-current":I,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,u,I,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:N?void 0:`calc(100% / ${r})`,maxHeight:N?`calc(100% / ${r})`:void 0,pointerEvents:S?void 0:"none",...T}),[N,r,T,S]),A=t?V:w,y=A?e.createElement("span",{className:"k-step-indicator-icon "+A,"aria-hidden":"true"}):e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:t?"check-circle":"exclamation-circle",icon:t?H||j.checkOutlineIcon:W||j.exclamationCircleIcon}),X=e.createElement(e.Fragment,null,F!=="labels"?e.createElement("span",{className:"k-step-indicator","aria-hidden":!0,style:{transitionDuration:G+"ms"}},b||M?!h&&t!==void 0?y:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?y:e.createElement("span",{className:"k-step-indicator-text"},q||a+1)):null),Y=(i||h||k)&&e.createElement("span",{className:"k-step-label"},i&&e.createElement("span",{className:"k-step-text"},i),h&&t!==void 0&&y,k&&e.createElement("span",{className:"k-step-label-optional"},B)),Z=e.createElement(e.Fragment,null,X,Y);return e.createElement("li",{ref:f,className:J,style:Q,...P},e.createElement("a",{className:"k-step-link",title:i||void 0,onClick:U,onFocus:K,"aria-current":I?"step":void 0,"aria-disabled":o||!S||void 0,"aria-invalid":t!==void 0&&!t||void 0},_?l:Z))});v.propTypes={children:n.any,className:n.string,current:n.bool,disabled:n.bool,icon:n.string,index:n.number,isValid:n.bool,label:n.string,optional:n.bool,style:n.object,tabIndex:n.number,text:n.string};const se={tabIndex:0};v.defaultProps=se;v.displayName="KendoStep";exports.Step=v;