carbon-react/esm/components/step-flow/step-flow.component.js

A library of reusable React components for easily building user interfaces.

import{jsx as e,jsxs as t}from"react/jsx-runtime";import{forwardRef as r,useRef as o,useImperativeHandle as n}from"react";import a from"../icon/icon.component.js";import i from"../icon-button/icon-button.component.js";import{StyledProgressIndicator as l,StyledStepFlow as s,StyledStepContent as c,StyledStepContentText as p,StyledStepLabelAndProgress as d,StyledProgressIndicatorBar as u}from"./step-flow.style.js";import f from"../../__internal__/utils/helpers/tags/tags.js";import b from"../../__internal__/utils/logger/index.js";import{Typography as m}from"../typography/typography.component.js";import g from"../../hooks/__internal__/useLocale/useLocale.js";import{StepFlowProvider as h}from"./__internal__/step-flow.context.js";import{StepFlowTitle as y}from"./step-flow-title/step-flow-title.component.js";function O(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}const v=r(((r,v)=>{var j,w,{category:S,title:P,titleVariant:_="h1",totalSteps:I,currentStep:k,showProgressIndicator:x=!1,showCloseIcon:z=!1,onDismiss:D,"aria-label":A,"aria-labelledby":C,"aria-describedby":L}=r,N=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(o=0;o<a.length;o++)r=a[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["category","title","titleVariant","totalSteps","currentStep","showProgressIndicator","showCloseIcon","onDismiss","aria-label","aria-labelledby","aria-describedby"]);const W=Array.from({length:I},((e,t)=>t+1)),E=k>I?I:k;let F=!1,R=!1;!F&&k>I&&(F=!0,b.warn("[WARNING] The `currentStep` prop should not be higher than the `totalSteps`prop in `StepFlow`. Please ensure `currentStep`s value does not exceed that of `totalSteps`, in the meantime we have set `currentStep` value to that of `totalSteps`, and all indicators have been marked as completed.")),R||v||(R=!0,b.warn("[WARNING] A `ref` should be provided to ensure focus is programmatically focused back to a title div, this ensures screen reader users are informed regarding any changes and can navigate back down the page."));const V=W.map((t=>e(l,{"aria-hidden":"true","data-role":"progress-indicator","data-element":"progress-indicator",isCompleted:t<E,isInProgress:t===E,"data-state":t===E?"in-progress":t<E?"is-completed":"not-completed",children:" "},t))),G=g(),H=e(i,{"data-element":"close","aria-label":null===(j=(w=G.stepFlow).closeIconAriaLabel)||void 0===j?void 0:j.call(w),onClick:D,children:e(a,{type:"close"})}),T=o(null);n(v,(()=>({focus(){var e;null===(e=T.current)||void 0===e||e.focus()}})),[]);const q=e(h,{value:{validatedCurrentStep:E,totalSteps:I,titleVariant:_,category:S,titleRef:T},children:"string"==typeof P?e(y,{titleString:P}):P}),B=e(m,{variant:"span",fontWeight:"400",fontSize:"var(--fontSizes200)",lineHeight:"var(--sizing300)","data-element":"step-label","aria-hidden":"true",children:G.stepFlow.stepLabel(E,I)});return t(s,(J=function(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){O(e,t,r[t])}))}return e}({role:"group","aria-label":A,"aria-describedby":L,"aria-labelledby":C},N,f("step-flow",N)),K=null!=(K={children:[t(c,{children:[S?t(p,{children:[e(m,{fontWeight:"400",fontSize:"var(--fontSizes100)",lineHeight:"var(--sizing250)",variant:"span","data-element":"category-text","aria-hidden":"true",children:S}),q]}):q,z?H:null]}),x?t(d,{children:[B,e(u,{"data-element":"progress-indicator-bar","data-role":"progress-indicator-bar",children:V})]}):B]})?K:{},Object.getOwnPropertyDescriptors?Object.defineProperties(J,Object.getOwnPropertyDescriptors(K)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(K)).forEach((function(e){Object.defineProperty(J,e,Object.getOwnPropertyDescriptor(K,e))})),J));var J,K}));export{v as StepFlow,v as default};