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