@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 © 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 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 i in s)if(i!=="default"){const m=Object.getOwnPropertyDescriptor(s,i);Object.defineProperty(p,i,m.get?m:{enumerable:!0,get:()=>s[i]})}}return p.default=s,Object.freeze(p)}const e=ae(ee),y=e.forwardRef((s,p)=>{const{children:i,className:m,current:v,disabled:o,focused:O,icon:b,svgIcon:M,index:a,isValid:t,label:l,optional:k,style:T,tabIndex:oe=se.tabIndex,text:q,..._}=s,{animationDuration:I,isVertical:g,item:z,linear:P,mode:F,numOfSteps:r,value:d,onChange:N,onFocus:x,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)},[]),E=e.useCallback(()=>({element:f.current,focus:R}),[R]);e.useImperativeHandle(p,E);const C=!P||a===d-1||a===d||a===d+1,S=F==="labels"||!!b&&!!l,$=ne.useLocalization(),B=(u=>$.toLanguageString(u,L.messages[u]))(L.optionalText),G=typeof I=="number"?I:I!==!1?D.DEFAULT_ANIMATION_DURATION:D.NO_ANIMATION,U=e.useCallback(u=>{N&&!o&&c.dispatchEvent(N,u,E(),{value:a})},[N,d,o]),K=e.useCallback(u=>{x&&!o&&c.dispatchEvent(x,u,E(),void 0)},[x,o]),J=e.useMemo(()=>c.classNames("k-step",{"k-step-first":a===0,"k-step-last":r&&a===r-1,"k-step-done":a<d,"k-step-current":v,"k-step-optional":k,"k-step-error":t!==void 0&&!t,"k-step-success":t,"k-disabled":o,"k-focus":O},m),[a,r,d,v,k,o,O,t,m]),Q=e.useMemo(()=>({maxWidth:g?void 0:`calc(100% / ${r})`,maxHeight:g?`calc(100% / ${r})`:void 0,pointerEvents:C?void 0:"none",...T}),[g,r,T,C]),A=t?V:w,h=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?!S&&t!==void 0?h:e.createElement(c.IconWrap,{className:"k-step-indicator-icon",name:b&&c.toIconName(b),icon:M}):t!==void 0?h:e.createElement("span",{className:"k-step-indicator-text"},q||a+1)):null),Y=(l||S||k)&&e.createElement("span",{className:"k-step-label"},l&&e.createElement("span",{className:"k-step-text"},l),S&&t!==void 0&&h,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,..._},e.createElement("a",{className:"k-step-link",title:l||void 0,onClick:U,onFocus:K,"aria-current":v?"step":void 0,"aria-disabled":o||!C||void 0,"aria-invalid":t!==void 0&&!t||void 0},z?i:Z))});y.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};y.displayName="KendoStep";exports.Step=y;