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