@progress/kendo-react-layout/stepper/Stepper.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 oe=require("react"),o=require("prop-types"),re=require("./context/StepperContext.js"),p=require("@progress/kendo-react-common"),ae=require("./Step.js"),ie=require("@progress/kendo-react-progressbars"),z=require("./contants.js"),ce=require("@progress/kendo-react-intl"),k=require("./messages/index.js");function le(u){const y=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const m in u)if(m!=="default"){const I=Object.getOwnPropertyDescriptor(u,m);Object.defineProperty(y,m,I.get?I:{enumerable:!0,get:()=>u[m]})}}return y.default=u,Object.freeze(y)}const e=le(oe),O=e.forwardRef((u,y)=>{const{animationDuration:m,children:I,className:T,disabled:g,errorIcon:_,errorSVGIcon:H,item:w,items:b,linear:E,mode:K,orientation:R,selectOnFocus:h,style:L,successIcon:G,successSVGIcon:B,value:c=0,onChange:N,onFocus:D}=u,M=ce.useLocalization(),U=M.toLanguageString(k.progressBarAriaLabel,k.messages[k.progressBarAriaLabel]),W=M.toLanguageString(k.ariaLabel,k.messages[k.ariaLabel]),v=e.useRef(null),P=e.useRef(null);p.useWebMcpRegister("stepper",P,u,u.webMcp);const q=e.useCallback(()=>{v.current&&p.focusFirstFocusableChild(v.current)},[]),S=e.useCallback(()=>({element:v.current,focus:q}),[q]);e.useImperativeHandle(y,S),e.useImperativeHandle(P,S);const[J,d]=e.useState(c),f=b?b.length:0,s=R==="vertical",x=p.useDir(v,u.dir),Q=typeof m=="number"?m:m!==!1?z.DEFAULT_ANIMATION_DURATION:z.NO_ANIMATION;e.useEffect(()=>{d(c)},[c]);const A=e.useCallback((i,r)=>{const t=r===c-1,n=r===c,a=r===c+1;c!==r&&N&&!g&&(!E||t||n||a)&&(p.dispatchEvent(N,i,S(),{value:r}),d(r))},[c,E,N,g,d]),X=e.useCallback(i=>{const r=i.value,t=i.syntheticEvent;A(t,r)},[A]),Y=e.useCallback(i=>{D&&!g&&p.dispatchEvent(D,i.syntheticEvent,S(),void 0)},[D,g]),C=e.useMemo(()=>{const i=x==="rtl",r=b.length-1;return new p.Navigation({root:v,selectors:["ol.k-step-list li.k-step a.k-step-link"],tabIndex:0,keyboardEvents:{keydown:{Tab:(t,n,a)=>{const l=n.elements.indexOf(t),V=n.previous(t).children[0],j=n.next(t).children[0];a.shiftKey?!i&&l>0?(a.preventDefault(),n.focusPrevious(t),d(l-1),h&&V.click()):i&&l<r&&(a.preventDefault(),n.focusNext(t),d(l+1),h&&j.click()):!i&&l<r?(a.preventDefault(),n.focusNext(t),d(l+1),h&&j.click()):i&&l>0&&(a.preventDefault(),n.focusPrevious(t),d(l-1),h&&V.click())},Home:(t,n,a)=>{a.preventDefault(),n.focusElement(n.first,t),d(0)},End:(t,n,a)=>{a.preventDefault(),n.focusElement(n.last,t),d(r)},Space:(t,n,a)=>{a.preventDefault(),t.children[0].click()},Enter:(t,n,a)=>{a.preventDefault(),t.children[0].click()}}}})},[x,b.length,d,h]);e.useEffect(()=>(C.initializeRovingTab(c),()=>C.removeFocusListener()),[]);const Z=e.useCallback(C.triggerKeyboardEvent.bind(C),[]),$=e.useMemo(()=>p.classNames("k-stepper",{"k-stepper-linear":E},T),[E,T]),ee=e.useMemo(()=>({display:"grid",gridTemplateColumns:s?void 0:"repeat("+f*2+", 1fr)",gridTemplateRows:s?"repeat("+f+", 1fr)":void 0,...L}),[s,f,L]),te=e.useMemo(()=>p.classNames("k-step-list",{"k-step-list-horizontal":!s,"k-step-list-vertical":s}),[s]),ne=e.useMemo(()=>({gridColumnStart:s?void 0:1,gridColumnEnd:s?void 0:-1,gridRowStart:s?1:void 0,gridRowEnd:s?-1:void 0}),[s]),se=e.useMemo(()=>({gridColumnStart:s?void 0:2,gridColumnEnd:s?void 0:f*2,gridRowStart:s?1:void 0,gridRowEnd:s?f:void 0,top:s?17:void 0}),[s,f]),F=b&&b.map((i,r)=>{const t={index:r,disabled:g||i.disabled,focused:r===J,current:r===c,...i},n=w||ae.Step;return e.createElement(n,{key:r,...t})});return e.createElement(re.StepperContext.Provider,{value:{animationDuration:m,isVertical:s,item:w,linear:E,mode:K,numOfSteps:f,value:c,successIcon:G,successSVGIcon:B,errorIcon:_,errorSVGIcon:H,onChange:X,onFocus:Y}},e.createElement("nav",{className:$,style:ee,dir:x,ref:v,onKeyDown:Z,"aria-label":W},e.createElement("ol",{className:te,style:ne},F||I),e.createElement(ie.ProgressBar,{style:se,labelPlacement:"start",animation:{duration:Q},ariaLabel:U,"aria-hidden":!0,labelVisible:!1,orientation:R,reverse:R==="vertical",value:f>1?Math.round(c/(f-1)*100):0,disabled:g,tabIndex:-1})))});O.propTypes={animationDuration:o.oneOfType([o.bool,o.number]),children:o.any,className:o.string,dir:o.string,disabled:o.bool,errorIcon:o.string,errorSVGIcon:p.svgIconPropType,item:o.any,items:o.any,linear:o.bool,mode:o.oneOf(["steps","labels"]),orientation:o.oneOf(["horizontal","vertical"]),style:o.object,successIcon:o.string,successSVGIcon:p.svgIconPropType,value:o.number.isRequired,onChange:o.func,onFocus:o.func};O.displayName="KendoStepper";exports.Stepper=O;