UNPKG

@cgi-learning-hub/ui

Version:

@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features

2 lines (1 loc) 15 kB
"use strict";const se=require("react"),e=require("./index-DLnSn8GT.cjs"),u=require("./identifier-BoZelETM.cjs"),c=require("react/jsx-runtime"),i=require("./DefaultPropsProvider-Cnf49AIv.cjs"),A=require("./integerPropType-CR7ytEJG.cjs"),ne=require("./isMuiElement-BzDAj3yJ.cjs"),z=require("./memoTheme-BKfsJx_F.cjs"),$=require("./useSlot-C2FjoUpF.cjs"),V=require("./createSvgIcon-IET9soda.cjs"),ae=require("./ButtonBase-Dp6sf_dP.cjs");function pe(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const r in t)if(r!=="default"){const s=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(o,r,s.get?s:{enumerable:!0,get:()=>t[r]})}}return o.default=t,Object.freeze(o)}const l=pe(se),h=l.createContext({});process.env.NODE_ENV!=="production"&&(h.displayName="StepperContext");function le(){return l.useContext(h)}const R=l.createContext({});process.env.NODE_ENV!=="production"&&(R.displayName="StepContext");function ie(){return l.useContext(R)}function F(t){return u.generateUtilityClass("MuiStep",t)}const ce=u.generateUtilityClasses("MuiStep",["root","horizontal","vertical","alternativeLabel","completed"]),de=t=>{const{classes:o,orientation:r,alternativeLabel:s,completed:n}=t,a={root:["root",r,s&&"alternativeLabel",n&&"completed"]};return i.composeClasses(a,F,o)},ue=i.styled("div",{name:"MuiStep",slot:"Root",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[o.root,o[r.orientation],r.alternativeLabel&&o.alternativeLabel,r.completed&&o.completed]}})({variants:[{props:{orientation:"horizontal"},style:{paddingLeft:8,paddingRight:8}},{props:{alternativeLabel:!0},style:{flex:1,position:"relative"}}]}),H=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStep"}),{active:n,children:a,className:T,component:d="div",completed:y,disabled:f,expanded:b=!1,index:p,last:m,...x}=s,{activeStep:v,connector:P,alternativeLabel:j,orientation:w,nonLinear:N}=l.useContext(h);let[S=!1,M=!1,L=!1]=[n,y,f];v===p?S=n!==void 0?n:!0:!N&&v>p?M=y!==void 0?y:!0:!N&&v<p&&(L=f!==void 0?f:!0);const U=l.useMemo(()=>({index:p,last:m,expanded:b,icon:p+1,active:S,completed:M,disabled:L}),[p,m,b,S,M,L]),C={...s,active:S,orientation:w,alternativeLabel:j,completed:M,disabled:L,expanded:b,component:d},O=de(C),I=c.jsxs(ue,{as:d,className:u.clsx(O.root,T),ref:r,ownerState:C,...x,children:[P&&j&&p!==0?P:null,a]});return c.jsx(R.Provider,{value:U,children:P&&!j&&p!==0?c.jsxs(l.Fragment,{children:[P,I]}):I})});process.env.NODE_ENV!=="production"&&(H.propTypes={active:e.PropTypes.bool,children:e.PropTypes.node,classes:e.PropTypes.object,className:e.PropTypes.string,completed:e.PropTypes.bool,component:e.PropTypes.elementType,disabled:e.PropTypes.bool,expanded:e.PropTypes.bool,index:A.integerPropType,last:e.PropTypes.bool,sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});const ye=V.createSvgIcon(c.jsx("path",{d:"M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z"}),"CheckCircle"),be=V.createSvgIcon(c.jsx("path",{d:"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"}),"Warning");function Te(t){return u.generateUtilityClass("MuiStepIcon",t)}const B=u.generateUtilityClasses("MuiStepIcon",["root","active","completed","error","text"]);var W;const fe=t=>{const{classes:o,active:r,completed:s,error:n}=t,a={root:["root",r&&"active",s&&"completed",n&&"error"],text:["text"]};return i.composeClasses(a,Te,o)},_=i.styled(V.SvgIcon,{name:"MuiStepIcon",slot:"Root"})(z.memoTheme(({theme:t})=>({display:"block",transition:t.transitions.create("color",{duration:t.transitions.duration.shortest}),color:(t.vars||t).palette.text.disabled,[`&.${B.completed}`]:{color:(t.vars||t).palette.primary.main},[`&.${B.active}`]:{color:(t.vars||t).palette.primary.main},[`&.${B.error}`]:{color:(t.vars||t).palette.error.main}}))),me=i.styled("text",{name:"MuiStepIcon",slot:"Text"})(z.memoTheme(({theme:t})=>({fill:(t.vars||t).palette.primary.contrastText,fontSize:t.typography.caption.fontSize,fontFamily:t.typography.fontFamily}))),G=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStepIcon"}),{active:n=!1,className:a,completed:T=!1,error:d=!1,icon:y,...f}=s,b={...s,active:n,completed:T,error:d},p=fe(b);if(typeof y=="number"||typeof y=="string"){const m=u.clsx(a,p.root);return d?c.jsx(_,{as:be,className:m,ref:r,ownerState:b,...f}):T?c.jsx(_,{as:ye,className:m,ref:r,ownerState:b,...f}):c.jsxs(_,{className:m,ref:r,ownerState:b,...f,children:[W||(W=c.jsx("circle",{cx:"12",cy:"12",r:"12"})),c.jsx(me,{className:p.text,x:"12",y:"12",textAnchor:"middle",dominantBaseline:"central",ownerState:b,children:y})]})}return y});process.env.NODE_ENV!=="production"&&(G.propTypes={active:e.PropTypes.bool,classes:e.PropTypes.object,className:e.PropTypes.string,completed:e.PropTypes.bool,error:e.PropTypes.bool,icon:e.PropTypes.node,sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});function J(t){return u.generateUtilityClass("MuiStepLabel",t)}const g=u.generateUtilityClasses("MuiStepLabel",["root","horizontal","vertical","label","active","completed","error","disabled","iconContainer","alternativeLabel","labelContainer"]),Pe=t=>{const{classes:o,orientation:r,active:s,completed:n,error:a,disabled:T,alternativeLabel:d}=t,y={root:["root",r,a&&"error",T&&"disabled",d&&"alternativeLabel"],label:["label",s&&"active",n&&"completed",a&&"error",T&&"disabled",d&&"alternativeLabel"],iconContainer:["iconContainer",s&&"active",n&&"completed",a&&"error",T&&"disabled",d&&"alternativeLabel"],labelContainer:["labelContainer",d&&"alternativeLabel"]};return i.composeClasses(y,J,o)},ve=i.styled("span",{name:"MuiStepLabel",slot:"Root",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[o.root,o[r.orientation]]}})({display:"flex",alignItems:"center",[`&.${g.alternativeLabel}`]:{flexDirection:"column"},[`&.${g.disabled}`]:{cursor:"default"},variants:[{props:{orientation:"vertical"},style:{textAlign:"left",padding:"8px 0"}}]}),Se=i.styled("span",{name:"MuiStepLabel",slot:"Label"})(z.memoTheme(({theme:t})=>({...t.typography.body2,display:"block",transition:t.transitions.create("color",{duration:t.transitions.duration.shortest}),[`&.${g.active}`]:{color:(t.vars||t).palette.text.primary,fontWeight:500},[`&.${g.completed}`]:{color:(t.vars||t).palette.text.primary,fontWeight:500},[`&.${g.alternativeLabel}`]:{marginTop:16},[`&.${g.error}`]:{color:(t.vars||t).palette.error.main}}))),xe=i.styled("span",{name:"MuiStepLabel",slot:"IconContainer"})({flexShrink:0,display:"flex",paddingRight:8,[`&.${g.alternativeLabel}`]:{paddingRight:0}}),Ce=i.styled("span",{name:"MuiStepLabel",slot:"LabelContainer"})(z.memoTheme(({theme:t})=>({width:"100%",color:(t.vars||t).palette.text.secondary,[`&.${g.alternativeLabel}`]:{textAlign:"center"}}))),E=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStepLabel"}),{children:n,className:a,componentsProps:T={},error:d=!1,icon:y,optional:f,slots:b={},slotProps:p={},StepIconComponent:m,StepIconProps:x,...v}=s,{alternativeLabel:P,orientation:j}=l.useContext(h),{active:w,disabled:N,completed:S,icon:M}=l.useContext(R),L=y||M;let U=m;L&&!U&&(U=G);const C={...s,active:w,alternativeLabel:P,completed:S,disabled:N,error:d,orientation:j},O=Pe(C),I={slots:b,slotProps:{stepIcon:x,...T,...p}},[ee,te]=$.useSlot("root",{elementType:ve,externalForwardedProps:{...I,...v},ownerState:C,ref:r,className:u.clsx(O.root,a)}),[oe,D]=$.useSlot("label",{elementType:Se,externalForwardedProps:I,ownerState:C}),[k,re]=$.useSlot("stepIcon",{elementType:U,externalForwardedProps:I,ownerState:C});return c.jsxs(ee,{...te,children:[L||k?c.jsx(xe,{className:O.iconContainer,ownerState:C,children:c.jsx(k,{completed:S,active:w,error:d,icon:L,...re})}):null,c.jsxs(Ce,{className:O.labelContainer,ownerState:C,children:[n?c.jsx(oe,{...D,className:u.clsx(O.label,D==null?void 0:D.className),children:n}):null,f]})]})});process.env.NODE_ENV!=="production"&&(E.propTypes={children:e.PropTypes.node,classes:e.PropTypes.object,className:e.PropTypes.string,componentsProps:e.PropTypes.shape({label:e.PropTypes.object}),error:e.PropTypes.bool,icon:e.PropTypes.node,optional:e.PropTypes.node,slotProps:e.PropTypes.shape({label:e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object]),root:e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object]),stepIcon:e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object])}),slots:e.PropTypes.shape({label:e.PropTypes.elementType,root:e.PropTypes.elementType,stepIcon:e.PropTypes.elementType}),StepIconComponent:e.PropTypes.elementType,StepIconProps:e.PropTypes.object,sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});E.muiName="StepLabel";function K(t){return u.generateUtilityClass("MuiStepButton",t)}const q=u.generateUtilityClasses("MuiStepButton",["root","horizontal","vertical","touchRipple"]),ge=t=>{const{classes:o,orientation:r}=t,s={root:["root",r],touchRipple:["touchRipple"]};return i.composeClasses(s,K,o)},Le=i.styled(ae.ButtonBase,{name:"MuiStepButton",slot:"Root",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[{[`& .${q.touchRipple}`]:o.touchRipple},o.root,o[r.orientation]]}})({width:"100%",padding:"24px 16px",margin:"-24px -16px",boxSizing:"content-box",[`& .${q.touchRipple}`]:{color:"rgba(0, 0, 0, 0.3)"},variants:[{props:{orientation:"vertical"},style:{justifyContent:"flex-start",padding:"8px",margin:"-8px"}}]}),Q=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStepButton"}),{children:n,className:a,icon:T,optional:d,...y}=s,{disabled:f,active:b}=l.useContext(R),{orientation:p}=l.useContext(h),m={...s,orientation:p},x=ge(m),v={icon:T,optional:d},P=ne.isMuiElement(n,["StepLabel"])?l.cloneElement(n,v):c.jsx(E,{...v,children:n});return c.jsx(Le,{focusRipple:!0,disabled:f,TouchRippleProps:{className:x.touchRipple},className:u.clsx(x.root,a),ref:r,ownerState:m,"aria-current":b?"step":void 0,...y,children:P})});process.env.NODE_ENV!=="production"&&(Q.propTypes={children:e.PropTypes.node,classes:e.PropTypes.object,className:e.PropTypes.string,icon:e.PropTypes.node,optional:e.PropTypes.node,sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});function X(t){return u.generateUtilityClass("MuiStepper",t)}const he=u.generateUtilityClasses("MuiStepper",["root","horizontal","vertical","nonLinear","alternativeLabel"]);function je(t){return u.generateUtilityClass("MuiStepConnector",t)}u.generateUtilityClasses("MuiStepConnector",["root","horizontal","vertical","alternativeLabel","active","completed","disabled","line","lineHorizontal","lineVertical"]);const Ne=t=>{const{classes:o,orientation:r,alternativeLabel:s,active:n,completed:a,disabled:T}=t,d={root:["root",r,s&&"alternativeLabel",n&&"active",a&&"completed",T&&"disabled"],line:["line",`line${u.capitalize(r)}`]};return i.composeClasses(d,je,o)},Re=i.styled("div",{name:"MuiStepConnector",slot:"Root",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[o.root,o[r.orientation],r.alternativeLabel&&o.alternativeLabel,r.completed&&o.completed]}})({flex:"1 1 auto",variants:[{props:{orientation:"vertical"},style:{marginLeft:12}},{props:{alternativeLabel:!0},style:{position:"absolute",top:12,left:"calc(-50% + 20px)",right:"calc(50% + 20px)"}}]}),we=i.styled("span",{name:"MuiStepConnector",slot:"Line",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[o.line,o[`line${u.capitalize(r.orientation)}`]]}})(z.memoTheme(({theme:t})=>{const o=t.palette.mode==="light"?t.palette.grey[400]:t.palette.grey[600];return{display:"block",borderColor:t.vars?t.vars.palette.StepConnector.border:o,variants:[{props:{orientation:"horizontal"},style:{borderTopStyle:"solid",borderTopWidth:1}},{props:{orientation:"vertical"},style:{borderLeftStyle:"solid",borderLeftWidth:1,minHeight:24}}]}})),Y=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStepConnector"}),{className:n,...a}=s,{alternativeLabel:T,orientation:d="horizontal"}=l.useContext(h),{active:y,disabled:f,completed:b}=l.useContext(R),p={...s,alternativeLabel:T,orientation:d,active:y,completed:b,disabled:f},m=Ne(p);return c.jsx(Re,{className:u.clsx(m.root,n),ref:r,ownerState:p,...a,children:c.jsx(we,{className:m.line,ownerState:p})})});process.env.NODE_ENV!=="production"&&(Y.propTypes={classes:e.PropTypes.object,className:e.PropTypes.string,sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});const Me=t=>{const{orientation:o,nonLinear:r,alternativeLabel:s,classes:n}=t,a={root:["root",o,r&&"nonLinear",s&&"alternativeLabel"]};return i.composeClasses(a,X,n)},Oe=i.styled("div",{name:"MuiStepper",slot:"Root",overridesResolver:(t,o)=>{const{ownerState:r}=t;return[o.root,o[r.orientation],r.alternativeLabel&&o.alternativeLabel,r.nonLinear&&o.nonLinear]}})({display:"flex",variants:[{props:{orientation:"horizontal"},style:{flexDirection:"row",alignItems:"center"}},{props:{orientation:"vertical"},style:{flexDirection:"column"}},{props:{alternativeLabel:!0},style:{alignItems:"flex-start"}}]}),Ie=c.jsx(Y,{}),Z=l.forwardRef(function(o,r){const s=i.useDefaultProps({props:o,name:"MuiStepper"}),{activeStep:n=0,alternativeLabel:a=!1,children:T,className:d,component:y="div",connector:f=Ie,nonLinear:b=!1,orientation:p="horizontal",...m}=s,x={...s,nonLinear:b,alternativeLabel:a,orientation:p,component:y},v=Me(x),P=l.Children.toArray(T).filter(Boolean),j=P.map((N,S)=>l.cloneElement(N,{index:S,last:S+1===P.length,...N.props})),w=l.useMemo(()=>({activeStep:n,alternativeLabel:a,connector:f,nonLinear:b,orientation:p}),[n,a,f,b,p]);return c.jsx(h.Provider,{value:w,children:c.jsx(Oe,{as:y,ownerState:x,className:u.clsx(v.root,d),ref:r,...m,children:j})})});process.env.NODE_ENV!=="production"&&(Z.propTypes={activeStep:A.integerPropType,alternativeLabel:e.PropTypes.bool,children:e.PropTypes.node,classes:e.PropTypes.object,className:e.PropTypes.string,component:e.PropTypes.elementType,connector:e.PropTypes.element,nonLinear:e.PropTypes.bool,orientation:e.PropTypes.oneOf(["horizontal","vertical"]),sx:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.oneOfType([e.PropTypes.func,e.PropTypes.object,e.PropTypes.bool])),e.PropTypes.func,e.PropTypes.object])});exports.Step=H;exports.StepButton=Q;exports.StepContext=R;exports.StepLabel=E;exports.Stepper=Z;exports.StepperContext=h;exports.getStepButtonUtilityClass=K;exports.getStepLabelUtilityClass=J;exports.getStepUtilityClass=F;exports.getStepperUtilityClass=X;exports.stepButtonClasses=q;exports.stepClasses=ce;exports.stepLabelClasses=g;exports.stepperClasses=he;exports.useStepContext=ie;exports.useStepperContext=le;