primereact/stepper/stepper.esm.min.js

PrimeReact is an open source UI library for React featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with Prime

import*as e from"react";import t from"react";import{PrimeReactContext as n}from"primereact/api";import{ComponentBase as r,useHandleStyle as a}from"primereact/componentbase";import{CSSTransition as i}from"primereact/csstransition";import{useMergeProps as p,useMountEffect as o,useUpdateEffect as l}from"primereact/hooks";import{classNames as c,ObjectUtils as s,UniqueComponentId as u}from"primereact/utils";function d(){return d=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},d.apply(null,arguments)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function m(e,t){if("object"!=f(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=f(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function b(e){var t=m(e,"string");return"symbol"==f(t)?t:t+""}function v(e,t,n){return(t=b(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function h(e){if(Array.isArray(e))return e}function g(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,a,i,p,o=[],l=!0,c=!1;try{if(i=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=i.call(n)).done)&&(o.push(r.value),o.length!==t);l=!0);}catch(e){c=!0,a=e}finally{try{if(!l&&null!=n.return&&(p=n.return(),Object(p)!==p))return}finally{if(c)throw a}}return o}}function y(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}function O(e,t){if(e){if("string"==typeof e)return y(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?y(e,t):void 0}}function x(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function S(e,t){return h(e)||g(e,t)||O(e,t)||x()}var P=r.extend({defaultProps:{__TYPE:"Stepper",activeStep:0,orientation:"horizontal",headerPosition:"right",linear:!1,onChangeStep:null,start:null,end:null,children:void 0},css:{classes:{root:function(e){var t=e.props;return c("p-stepper p-component",{"p-stepper-horizontal":"horizontal"===t.orientation,"p-stepper-vertical":"vertical"===t.orientation,"p-readonly":t.linear})},nav:"p-stepper-nav",stepper:{header:function(e){var t=e.isItemDisabled,n=e.index,r=e.headerPosition,a=e.orientation;return c("p-stepper-header",v({"p-highlight":(0,e.isStepActive)(n),"p-disabled":t(n)},"p-stepper-header-".concat(r),"horizontal"===a))},action:"p-stepper-action p-component",number:"p-stepper-number",title:"p-stepper-title",separator:"p-stepper-separator",toggleableContent:"p-stepper-toggleable-content",content:function(e){return c("p-stepper-content",{"p-toggleable-content":"vertical"===e.props.orientation})},panel:function(e){return c("p-stepper-panel",{"p-stepper-panel-active":"vertical"===e.props.orientation&&(0,e.isStepActive)(e.index)})}},panelContainer:"p-stepper-panels",start:"p-stepper-start",end:"p-stepper-end"},styles:"\n@layer primereact {\n    .p-stepper .p-stepper-nav {\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        overflow-x: auto;\n    }\n\n    .p-stepper-vertical .p-stepper-nav {\n        flex-direction: column;\n    }\n\n    .p-stepper-header {\n        position: relative;\n        display: flex;\n        flex: 1 1 auto;\n        align-items: center;\n\n        &:last-of-type {\n            flex: initial;\n        }\n    }\n\n    .p-stepper-header-bottom {\n        align-items: flex-start;\n    }\n\n    .p-stepper-header-top {\n        align-items: flex-end;\n    }\n\n    .p-stepper-header-right, .p-stepper-header-left {\n        align-items: center;\n    }\n\n    .p-stepper-header .p-stepper-action {\n        border: 0 none;\n        display: inline-flex;\n        align-items: center;\n        text-decoration: none;\n        cursor: pointer;\n\n        &:focus-visible {\n            @include focused();\n        }\n    }\n\n    .p-stepper-header-bottom .p-stepper-action {\n        flex-direction: column;\n    }\n\n    .p-stepper-header-top .p-stepper-action {\n        flex-direction: column-reverse;\n    }\n\n    .p-stepper-header-left .p-stepper-action {\n        flex-direction: row-reverse;\n    }\n\n    .p-stepper.p-stepper-readonly .p-stepper-header {\n        cursor: auto;\n    }\n\n    .p-stepper-header.p-highlight .p-stepper-action {\n        cursor: default;\n    }\n\n    .p-stepper-title {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        max-width: 100%;\n    }\n\n    .p-stepper-number {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-stepper-separator {\n        flex: 1 1 0;\n    }\n}\n"}});function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var E=e.memo(e.forwardRef((function(t,n){var r=p()(w(w(w({ref:n,id:t.id,className:(0,t.cx)("stepper.content",{stepperpanel:t.stepperpanel,index:t.index}),role:"tabpanel","aria-labelledby":t.ariaLabelledby},t.getStepPT(t.stepperpanel,"root",t.index)),t.getStepPT(t.stepperpanel,"content",t.index)),{},{"data-p-active":t.active}));return e.createElement("div",r,t.template?e.createElement(t.template,{index:t.index,active:t.active,highlighted:t.highlighted,clickCallback:function(e){return t.onItemClick(e,t.index)},prevCallback:function(e){return t.prevCallback(e,t.index)},nextCallback:function(e){return t.nextCallback(e,t.index)}}):t.stepperpanel)})));function C(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?C(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}E.displayName="StepperContent";var D=e.memo(e.forwardRef((function(t,n){var r=p(),a=t.cx,i=r(k({ref:n,id:t.id,className:a("stepper.action"),role:"tab",type:"button",tabIndex:t.disabled?-1:void 0,"aria-controls":t.ariaControls,onClick:function(e){return t.clickCallback(e,t.index)}},t.getStepPT(t.stepperpanel,"action",t.index))),o=r(k({className:a("stepper.number")},t.getStepPT(t.stepperpanel,"number",t.index))),l=r(k({className:a("stepper.title")},t.getStepPT(t.stepperpanel,"title",t.index)));return t.template?t.template():e.createElement("button",i,e.createElement("span",o,t.index+1),e.createElement("span",l,t.getStepProp(t.stepperpanel,"header")))})));function N(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function A(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?N(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):N(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}D.displayName="StepperHeader";var T=e.memo(e.forwardRef((function(t,n){var r=p()(A({ref:n,"aria-hidden":!0,className:t.separatorClass},t.getStepPT(t.stepperpanel,"separator",t.index)));return t.template?t.template():e.createElement("span",r)})));function I(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function R(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?I(Object(n),!0).forEach((function(t){v(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):I(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}T.displayName="StepperSeparator";var _=t.memo(t.forwardRef((function(e,r){var f=p(),m=t.useContext(n),b=P.getProps(e,m),v=s.getJSXElement(b.start,b),h=s.getJSXElement(b.end,b),g=P.setMetaData({props:b}),y=g.ptm,O=g.cx,x=g.isUnstyled,j=g.ptmo,w=S(t.useState(b.id),2),C=w[0],k=w[1],N=S(t.useState(b.activeStep),2),A=N[0],I=N[1],_=t.useRef();a(P.css.styles,x,{name:"stepper"});var z=f({className:O("start")},y("start")),L=f({className:O("end")},y("end"));o((function(){C||k(u())})),l((function(){b.activeStep>=0&&b.activeStep<=$().length-1&&B(void 0,b.activeStep)}),[b.activeStep]);var H=function(e,t){var n;return null==e||null===(n=e.props)||void 0===n?void 0:n[t]},J=function(e,t){return H(e,"header")||t},M=function(e){return"StepperPanel"===e.type.displayName},U=function(e){return A===e},X=function(e){return b.linear&&!U(e)},B=function(e,t){I(t),b.onChangeStep&&b.onChangeStep({originalEvent:e,index:t})},F=function(e){return"".concat(C,"_").concat(e,"_header_action")},Y=function(e){return"".concat(C,"_").concat(e,"content")},$=function(){return t.Children.toArray(b.children).reduce((function(e,n){return M(n)?e.push(n):n&&Array.isArray(n)&&t.Children.toArray(n.props.children).forEach((function(t){M(t)&&e.push(t)})),e}),[])},q=function(e,t){0!==t&&B(e,t-1)},G=function(e,t){t!==$().length-1&&B(e,t+1)},K=function(e,t,n){var r=$().length,a={props:e.props,parent:{props:b},context:{index:n,count:r,first:0===n,last:n===r-1,active:U(n),highlighted:n<A,disabled:X(n)}};return f(y("stepperpanel.".concat(t),{stepperpanel:a}),y("stepperpanel.".concat(t),a),j(H(e,"pt"),t,a))},Q=function(e,t){b.linear?e.preventDefault():t!==A&&B(e,t)};t.useImperativeHandle(r,(function(){return{getElement:function(){return _.current},getActiveStep:function(){return A},setActiveStep:function(e){return I(e)},nextCallback:function(e){return G(e,A)},prevCallback:function(e){return q(e,A)}}}));var V,W,Z,ee=f({className:c(O("root")),role:"tablist"},P.getOtherProps(b),y("root"));return t.createElement("div",ee,v&&t.createElement("div",z,v),"horizontal"===b.orientation&&(V=$().map((function(e,n){var r,a,i=f(R({className:c(O("stepper.header",{isStepActive:U,isItemDisabled:X,step:e,index:n,headerPosition:b.headerPosition,orientation:b.orientation})),"aria-current":U(n)&&"step",role:"presentation","data-p-highlight":U(n),"data-p-disabled":X(n),"data-p-active":U(n)},K(e,"header",n)));return t.createElement("li",d({key:J(e,n)},i),t.createElement(D,{id:F(n),template:null===(r=e.children)||void 0===r?void 0:r.header,stepperpanel:e,index:n,disabled:X(n),active:U(n),highlighted:n<A,ariaControls:Y(n),clickCallback:Q,getStepPT:K,getStepProp:H,cx:O}),n!==$().length-1&&t.createElement(T,{template:null===(a=e.children)||void 0===a?void 0:a.separator,separatorClass:O("stepper.separator"),stepperpanel:e,index:n,active:U(n),highlighted:n<A,getStepPT:K}))})),W=f({className:c(O("nav")),ref:_},y("nav")),Z=f({className:O("panelContainer")},y("panelContainer")),t.createElement(t.Fragment,null,t.createElement("ul",W,V),t.createElement("div",Z,$().map((function(e,n){var r;return U(n)?t.createElement(E,{key:Y(n),id:Y(n),tempate:null==e||null===(r=e.children)||void 0===r?void 0:r.content,stepperpanel:e,index:n,active:U(n),highlighted:n<A,clickCallback:Q,prevCallback:q,nextCallback:G,getStepPT:K,ariaLabelledby:F(n),ptm:y,cx:O}):null}))))),"vertical"===b.orientation&&$().map((function(e,n){var r,a,p,o=t.createRef(null),l=f(R(R(R({ref:_,className:O("stepper.panel",{props:b,index:n,isStepActive:U}),"aria-current":U(n)&&"step"},K(e,"root",n)),K(e,"panel",n)),{},{"data-p-highlight":U(n),"data-p-disabled":X(n),"data-p-active":U(n)})),c=f(R({className:O("stepper.header",{step:e,isStepActive:U,isItemDisabled:X,index:n})},K(e,"header",n))),s=f(R(R({classNames:O("stepper.content")},K(e,"transition",n)),{},{timeout:{enter:1e3,exit:450},in:U(n),unmountOnExit:!0})),u=f(R({ref:o,className:O("stepper.toggleableContent")},K(e,"toggleableContent",n)));return t.createElement("div",d({key:J(e,n)},l),t.createElement("div",c,t.createElement(D,{id:F(n),template:null===(r=e.children)||void 0===r?void 0:r.header,stepperpanel:e,index:n,disabled:X(n),active:U(n),highlighted:n<A,ariaControls:Y(n),clickCallback:Q,getStepPT:K,getStepProp:H,cx:O})),t.createElement(i,d({nodeRef:o},s),t.createElement("div",u,n!==$().length-1&&t.createElement(T,{template:null===(a=e.children)||void 0===a?void 0:a.separator,separatorClass:O("stepper.separator"),stepperpanel:e,index:n,active:U(n),highlighted:n<A,getStepPT:K}),t.createElement(E,{key:Y(n),id:Y(n),tempate:null==e||null===(p=e.children)||void 0===p?void 0:p.content,stepperpanel:e,index:n,active:U(n),highlighted:n<A,clickCallback:Q,prevCallback:q,nextCallback:G,getStepPT:K,ariaLabelledby:F(n),ptm:y,cx:O}))))})),h&&t.createElement("div",L,h))})));P.displayName="StepperBase";export{_ as Stepper};