primereact/steps/steps.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{PrimeReactContext as t}from"primereact/api";import{ComponentBase as n,useHandleStyle as r}from"primereact/componentbase";import{useMergeProps as i,useMountEffect as a}from"primereact/hooks";import{classNames as o,UniqueComponentId as l,IconUtils as c,ObjectUtils as s,DomHandler as u}from"primereact/utils";function p(e){return p="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},p(e)}function m(e,t){if("object"!==p(e)||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!==p(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}function f(e){var t=m(e,"string");return"symbol"===p(t)?t:String(t)}function d(e){if(Array.isArray(e))return e}function y(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,i,a,o,l=[],c=!0,s=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;c=!1}else for(;!(c=(r=a.call(n)).done)&&(l.push(r.value),l.length!==t);c=!0);}catch(e){s=!0,i=e}finally{try{if(!c&&null!=n.return&&(o=n.return(),Object(o)!==o))return}finally{if(s)throw i}}return l}}function b(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function v(e,t){if(e){if("string"==typeof e)return b(e,t);var n=Object.prototype.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)?b(e,t):void 0}}function g(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var h=n.extend({defaultProps:{__TYPE:"Steps",id:null,model:null,activeIndex:0,readOnly:!0,style:null,className:null,onSelect:null,children:void 0},css:{classes:{icon:function(e){return o("p-menuitem-icon",e.item.icon)},label:"p-steps-title",step:"p-steps-number",action:"p-menuitem-link",menuitem:function(e){return o("p-steps-item",e.item.className,{"p-highlight p-steps-current":e.active,"p-disabled":e.disabled})},root:function(e){return o("p-steps p-component",{"p-readonly":e.props.readOnly})}},styles:"\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\n    }\n}\n"}});function O(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 S(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?O(Object(n),!0).forEach((function(t){var r,i,a;r=e,a=n[t],(i=f(i=t))in r?Object.defineProperty(r,i,{value:a,enumerable:!0,configurable:!0,writable:!0}):r[i]=a})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):O(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var x=e.memo(e.forwardRef((function(n,p){var m,f,b=i(),O=e.useContext(t),x=h.getProps(n,O),E=e.useState(x.id),j=(f=2,d(m=E)||y(m,f)||v(m,f)||g()),w=j[0],P=j[1],N=e.useRef(null),k=e.useRef(null),D=h.setMetaData({props:x,state:{id:w}}),I=D.ptm,A=D.cx;r(h.css.styles,D.isUnstyled,{name:"steps"});var C=function(e,t,n){x.readOnly||t.disabled?e.preventDefault():(x.onSelect&&x.onSelect({originalEvent:e,item:t,index:n}),t.command&&t.command({originalEvent:e,item:t,index:n}),t.url||(e.preventDefault(),e.stopPropagation()))},T=function(e,t,n){if(!x.readOnly)switch(e.code){case"ArrowRight":R(e.target),e.preventDefault();break;case"ArrowLeft":_(e.target),e.preventDefault();break;case"Home":F(e.target),e.preventDefault();break;case"End":H(e.target),e.preventDefault();break;case"Tab":break;case"Enter":case"NumpadEnter":case"Space":C(e,t,n),e.preventDefault()}},R=function(e){var t=J(e);t&&B(e,t)},_=function(e){var t=M(e);t&&B(e,t)},F=function(e){var t=U();t&&B(e,t)},H=function(e){var t=X();t&&B(e,t)},J=function(e){var t=e.parentElement.nextElementSibling;return t?t.children[0]:null},M=function(e){var t=e.parentElement.previousElementSibling;return t?t.children[0]:null},U=function(){var e=u.findSingle(k.current,'[data-pc-section="menuitem"]');return e?e.children[0]:null},X=function(){var e=u.find(k.current,'[data-pc-section="menuitem"]');return e?e[e.length-1].children[0]:null},B=function(e,t){e.tabIndex="-1",t.tabIndex="0",setTimeout((function(){return t.focus()}),0)},K=function(){var e=U();e.tabIndex="0",e.focus()},L=function(t,n){if(!1===t.visible)return null;var r=t.id||w+"_"+n,i=n===x.activeIndex,a=t.disabled||n!==x.activeIndex&&x.readOnly,l=o("p-menuitem-icon",t.icon),u=b({className:A("icon",{item:t})},I("icon")),p=c.getJSXIcon(t.icon,S({},u),{props:x}),m=b({className:A("label")},I("label")),f=t.label&&e.createElement("span",m,t.label),d=b({className:A("step")},I("step")),y=b({href:t.url||"#",className:A("action"),tabIndex:"-1",onFocus:function(e){return e.stopPropagation()},target:t.target,onKeyDown:function(e){return T(e,t,n)},onClick:function(e){return C(e,t,n)}},I("action")),v=e.createElement("a",y,e.createElement("span",d,n+1),p,f);t.template&&(v=s.getJSXElement(t.template,t,{onClick:function(e){return C(e,t,n)},className:"p-menuitem-link",labelClassName:"p-steps-title",numberClassName:"p-steps-number",iconClassName:l,"aria-current":i,element:v,props:x,active:i,disabled:a}));var g=b({key:r,id:r,className:A("menuitem",{active:i,disabled:a,item:t}),style:t.style},I("menuitem"));return e.createElement("li",g,v)};a((function(){w||P(l())})),e.useImperativeHandle(p,(function(){return{props:x,getElement:function(){return N.current}}}));var Y=b({id:x.id,ref:N,className:o(x.className,A("root")),style:x.style},h.getOtherProps(x),I("root")),$=function(){var t=b({ref:k,tabIndex:x.readOnly?null:"0",onFocus:function(){x.readOnly||K()},onBlur:function(){return K}},I("menu"));if(x.model){var n=x.model.map(L);return e.createElement("ol",t,n)}return null}();return e.createElement("nav",Y,$)})));x.displayName="Steps";export{x as Steps};