@progress/kendo-react-layout/splitter/SplitterBar.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

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