@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
75 lines (65 loc) • 14.6 kB
JavaScript
var Ne=Object.defineProperty;var je=(n,t,e)=>t in n?Ne(n,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):n[t]=e;var ie=(n,t,e)=>je(n,typeof t!="symbol"?t+"":t,e);const T=require("react"),o=require("./index-kjfz41UI.cjs"),P=require("./generateUtilityClasses-CENS22bI.cjs"),F=require("react/jsx-runtime"),I=require("./DefaultPropsProvider-C1g4BXET.cjs"),ae=require("./useTimeout-COCrDKz-.cjs"),H=require("./TransitionGroupContext-Zt4NoR0u.cjs"),oe=require("@emotion/react"),le=require("./useForkRef-CFhhTu-Q.cjs"),J=require("./useEventCallback-BxpcFap0.cjs"),ue=require("./isFocusVisible-DlSijby6.cjs"),ke=require("./elementTypeAcceptingRef-vjR5jGLx.cjs"),Se=require("./refType-DJyA--UV.cjs");function Oe(n){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const e in n)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>n[e]})}}return t.default=n,Object.freeze(t)}const d=Oe(T);class Q{constructor(){ie(this,"mountEffect",()=>{this.shouldMount&&!this.didMount&&this.ref.current!==null&&(this.didMount=!0,this.mounted.resolve())});this.ref={current:null},this.mounted=null,this.didMount=!1,this.shouldMount=!1,this.setShouldMount=null}static create(){return new Q}static use(){const t=ae.useLazyRef(Q.create).current,[e,i]=d.useState(!1);return t.shouldMount=e,t.setShouldMount=i,d.useEffect(t.mountEffect,[e]),t}mount(){return this.mounted||(this.mounted=Be(),this.shouldMount=!0,this.setShouldMount(this.shouldMount)),this.mounted}start(...t){this.mount().then(()=>{var e;return(e=this.ref.current)==null?void 0:e.start(...t)})}stop(...t){this.mount().then(()=>{var e;return(e=this.ref.current)==null?void 0:e.stop(...t)})}pulsate(...t){this.mount().then(()=>{var e;return(e=this.ref.current)==null?void 0:e.pulsate(...t)})}}function we(){return Q.use()}function Be(){let n,t;const e=new Promise((i,s)=>{n=i,t=s});return e.resolve=n,e.reject=t,e}function Z(){return Z=Object.assign?Object.assign.bind():function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var i in e)({}).hasOwnProperty.call(e,i)&&(n[i]=e[i])}return n},Z.apply(null,arguments)}function Le(n){if(n===void 0)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return n}function se(n,t){var e=function(r){return t&&T.isValidElement(r)?t(r):r},i=Object.create(null);return n&&T.Children.map(n,function(s){return s}).forEach(function(s){i[s.key]=e(s)}),i}function Fe(n,t){n=n||{},t=t||{};function e(h){return h in t?t[h]:n[h]}var i=Object.create(null),s=[];for(var r in n)r in t?s.length&&(i[r]=s,s=[]):s.push(r);var l,p={};for(var a in t){if(i[a])for(l=0;l<i[a].length;l++){var f=i[a][l];p[i[a][l]]=e(f)}p[a]=e(a)}for(l=0;l<s.length;l++)p[s[l]]=e(s[l]);return p}function L(n,t,e){return e[t]!=null?e[t]:n.props[t]}function qe(n,t){return se(n.children,function(e){return T.cloneElement(e,{onExited:t.bind(null,e),in:!0,appear:L(e,"appear",n),enter:L(e,"enter",n),exit:L(e,"exit",n)})})}function Ue(n,t,e){var i=se(n.children),s=Fe(t,i);return Object.keys(s).forEach(function(r){var l=s[r];if(T.isValidElement(l)){var p=r in t,a=r in i,f=t[r],h=T.isValidElement(f)&&!f.props.in;a&&(!p||h)?s[r]=T.cloneElement(l,{onExited:e.bind(null,l),in:!0,exit:L(l,"exit",n),enter:L(l,"enter",n)}):!a&&p&&!h?s[r]=T.cloneElement(l,{in:!1}):a&&p&&T.isValidElement(f)&&(s[r]=T.cloneElement(l,{onExited:e.bind(null,l),in:f.props.in,exit:L(l,"exit",n),enter:L(l,"enter",n)}))}}),s}var $e=Object.values||function(n){return Object.keys(n).map(function(t){return n[t]})},Ie={component:"div",childFactory:function(t){return t}},ee=(function(n){H._inheritsLoose(t,n);function t(i,s){var r;r=n.call(this,i,s)||this;var l=r.handleExited.bind(Le(r));return r.state={contextValue:{isMounting:!0},handleExited:l,firstRender:!0},r}var e=t.prototype;return e.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},e.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(s,r){var l=r.children,p=r.handleExited,a=r.firstRender;return{children:a?qe(s,p):Ue(s,l,p),firstRender:!1}},e.handleExited=function(s,r){var l=se(this.props.children);s.key in l||(s.props.onExited&&s.props.onExited(r),this.mounted&&this.setState(function(p){var a=Z({},p.children);return delete a[s.key],{children:a}}))},e.render=function(){var s=this.props,r=s.component,l=s.childFactory,p=H._objectWithoutPropertiesLoose(s,["component","childFactory"]),a=this.state.contextValue,f=$e(this.state.children).map(l);return delete p.appear,delete p.enter,delete p.exit,r===null?T.createElement(H.TransitionGroupContext.Provider,{value:a},f):T.createElement(H.TransitionGroupContext.Provider,{value:a},T.createElement(r,p,f))},t})(T.Component);ee.propTypes=process.env.NODE_ENV!=="production"?{component:o.PropTypes.any,children:o.PropTypes.node,appear:o.PropTypes.bool,enter:o.PropTypes.bool,exit:o.PropTypes.bool,childFactory:o.PropTypes.func}:{};ee.defaultProps=Ie;function ce(n){const{className:t,classes:e,pulsate:i=!1,rippleX:s,rippleY:r,rippleSize:l,in:p,onExited:a,timeout:f}=n,[h,m]=d.useState(!1),R=P.clsx(t,e.ripple,e.rippleVisible,i&&e.ripplePulsate),v={width:l,height:l,top:-(l/2)+r,left:-(l/2)+s},b=P.clsx(e.child,h&&e.childLeaving,i&&e.childPulsate);return!p&&!h&&m(!0),d.useEffect(()=>{if(!p&&a!=null){const S=setTimeout(a,f);return()=>{clearTimeout(S)}}},[a,p,f]),F.jsx("span",{className:R,style:v,children:F.jsx("span",{className:b})})}process.env.NODE_ENV!=="production"&&(ce.propTypes={classes:o.PropTypes.object.isRequired,className:o.PropTypes.string,in:o.PropTypes.bool,onExited:o.PropTypes.func,pulsate:o.PropTypes.bool,rippleSize:o.PropTypes.number,rippleX:o.PropTypes.number,rippleY:o.PropTypes.number,timeout:o.PropTypes.number.isRequired});const g=P.generateUtilityClasses("MuiTouchRipple",["root","ripple","rippleVisible","ripplePulsate","child","childLeaving","childPulsate"]),ne=550,ze=80,_e=oe.keyframes`
0% {
transform: scale(0);
opacity: 0.1;
}
100% {
transform: scale(1);
opacity: 0.3;
}
`,Ae=oe.keyframes`
0% {
opacity: 1;
}
100% {
opacity: 0;
}
`,Xe=oe.keyframes`
0% {
transform: scale(1);
}
50% {
transform: scale(0.92);
}
100% {
transform: scale(1);
}
`,Ye=I.styled("span",{name:"MuiTouchRipple",slot:"Root"})({overflow:"hidden",pointerEvents:"none",position:"absolute",zIndex:0,top:0,right:0,bottom:0,left:0,borderRadius:"inherit"}),Ke=I.styled(ce,{name:"MuiTouchRipple",slot:"Ripple"})`
opacity: 0;
position: absolute;
&.${g.rippleVisible} {
opacity: 0.3;
transform: scale(1);
animation-name: ${_e};
animation-duration: ${ne}ms;
animation-timing-function: ${({theme:n})=>n.transitions.easing.easeInOut};
}
&.${g.ripplePulsate} {
animation-duration: ${({theme:n})=>n.transitions.duration.shorter}ms;
}
& .${g.child} {
opacity: 1;
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background-color: currentColor;
}
& .${g.childLeaving} {
opacity: 0;
animation-name: ${Ae};
animation-duration: ${ne}ms;
animation-timing-function: ${({theme:n})=>n.transitions.easing.easeInOut};
}
& .${g.childPulsate} {
position: absolute;
/* @noflip */
left: 0px;
top: 0;
animation-name: ${Xe};
animation-duration: 2500ms;
animation-timing-function: ${({theme:n})=>n.transitions.easing.easeInOut};
animation-iteration-count: infinite;
animation-delay: 200ms;
}
`,pe=d.forwardRef(function(t,e){const i=I.useDefaultProps({props:t,name:"MuiTouchRipple"}),{center:s=!1,classes:r={},className:l,...p}=i,[a,f]=d.useState([]),h=d.useRef(0),m=d.useRef(null);d.useEffect(()=>{m.current&&(m.current(),m.current=null)},[a]);const R=d.useRef(!1),v=ae.useTimeout(),b=d.useRef(null),S=d.useRef(null),C=d.useCallback(c=>{const{pulsate:x,rippleX:M,rippleY:$,rippleSize:O,cb:z}=c;f(E=>[...E,F.jsx(Ke,{classes:{ripple:P.clsx(r.ripple,g.ripple),rippleVisible:P.clsx(r.rippleVisible,g.rippleVisible),ripplePulsate:P.clsx(r.ripplePulsate,g.ripplePulsate),child:P.clsx(r.child,g.child),childLeaving:P.clsx(r.childLeaving,g.childLeaving),childPulsate:P.clsx(r.childPulsate,g.childPulsate)},timeout:ne,pulsate:x,rippleX:M,rippleY:$,rippleSize:O},h.current)]),h.current+=1,m.current=z},[r]),q=d.useCallback((c={},x={},M=()=>{})=>{const{pulsate:$=!1,center:O=s||x.pulsate,fakeElement:z=!1}=x;if((c==null?void 0:c.type)==="mousedown"&&R.current){R.current=!1;return}(c==null?void 0:c.type)==="touchstart"&&(R.current=!0);const E=z?null:S.current,N=E?E.getBoundingClientRect():{width:0,height:0,left:0,top:0};let j,V,k;if(O||c===void 0||c.clientX===0&&c.clientY===0||!c.clientX&&!c.touches)j=Math.round(N.width/2),V=Math.round(N.height/2);else{const{clientX:_,clientY:w}=c.touches&&c.touches.length>0?c.touches[0]:c;j=Math.round(_-N.left),V=Math.round(w-N.top)}if(O)k=Math.sqrt((2*N.width**2+N.height**2)/3),k%2===0&&(k+=1);else{const _=Math.max(Math.abs((E?E.clientWidth:0)-j),j)*2+2,w=Math.max(Math.abs((E?E.clientHeight:0)-V),V)*2+2;k=Math.sqrt(_**2+w**2)}c!=null&&c.touches?b.current===null&&(b.current=()=>{C({pulsate:$,rippleX:j,rippleY:V,rippleSize:k,cb:M})},v.start(ze,()=>{b.current&&(b.current(),b.current=null)})):C({pulsate:$,rippleX:j,rippleY:V,rippleSize:k,cb:M})},[s,C,v]),K=d.useCallback(()=>{q({},{pulsate:!0})},[q]),U=d.useCallback((c,x)=>{if(v.clear(),(c==null?void 0:c.type)==="touchend"&&b.current){b.current(),b.current=null,v.start(0,()=>{U(c,x)});return}b.current=null,f(M=>M.length>0?M.slice(1):M),m.current=x},[v]);return d.useImperativeHandle(e,()=>({pulsate:K,start:q,stop:U}),[K,q,U]),F.jsx(Ye,{className:P.clsx(g.root,r.root,l),ref:S,...p,children:F.jsx(ee,{component:null,exit:!0,children:a})})});process.env.NODE_ENV!=="production"&&(pe.propTypes={center:o.PropTypes.bool,classes:o.PropTypes.object,className:o.PropTypes.string});function Ge(n){return P.generateUtilityClass("MuiButtonBase",n)}const We=P.generateUtilityClasses("MuiButtonBase",["root","disabled","focusVisible"]),He=n=>{const{disabled:t,focusVisible:e,focusVisibleClassName:i,classes:s}=n,r={root:["root",t&&"disabled",e&&"focusVisible"]},l=I.composeClasses(r,Ge,s);return e&&i&&(l.root+=` ${i}`),l},Je=I.styled("button",{name:"MuiButtonBase",slot:"Root"})({display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative",boxSizing:"border-box",WebkitTapHighlightColor:"transparent",backgroundColor:"transparent",outline:0,border:0,margin:0,borderRadius:0,padding:0,cursor:"pointer",userSelect:"none",verticalAlign:"middle",MozAppearance:"none",WebkitAppearance:"none",textDecoration:"none",color:"inherit","&::-moz-focus-inner":{borderStyle:"none"},[`&.${We.disabled}`]:{pointerEvents:"none",cursor:"default"},"@media print":{colorAdjust:"exact"}}),fe=d.forwardRef(function(t,e){const i=I.useDefaultProps({props:t,name:"MuiButtonBase"}),{action:s,centerRipple:r=!1,children:l,className:p,component:a="button",disabled:f=!1,disableRipple:h=!1,disableTouchRipple:m=!1,focusRipple:R=!1,focusVisibleClassName:v,LinkComponent:b="a",onBlur:S,onClick:C,onContextMenu:q,onDragLeave:K,onFocus:U,onFocusVisible:c,onKeyDown:x,onKeyUp:M,onMouseDown:$,onMouseLeave:O,onMouseUp:z,onTouchEnd:E,onTouchMove:N,onTouchStart:j,tabIndex:V=0,TouchRippleProps:k,touchRippleRef:_,type:w,...A}=i,X=d.useRef(null),y=we(),de=le.useForkRef(y.ref,_),[B,G]=d.useState(!1);f&&B&&G(!1),d.useImperativeHandle(s,()=>({focusVisible:()=>{G(!0),X.current.focus()}}),[]);const he=y.shouldMount&&!h&&!f;d.useEffect(()=>{B&&R&&!h&&y.pulsate()},[h,R,B,y]);const me=D(y,"start",$,m),ye=D(y,"stop",q,m),Te=D(y,"stop",K,m),be=D(y,"stop",z,m),Pe=D(y,"stop",u=>{B&&u.preventDefault(),O&&O(u)},m),ge=D(y,"start",j,m),Re=D(y,"stop",E,m),Me=D(y,"stop",N,m),xe=D(y,"stop",u=>{ue.isFocusVisible(u.target)||G(!1),S&&S(u)},!1),Ee=J.useEventCallback(u=>{X.current||(X.current=u.currentTarget),ue.isFocusVisible(u.target)&&(G(!0),c&&c(u)),U&&U(u)}),te=()=>{const u=X.current;return a&&a!=="button"&&!(u.tagName==="A"&&u.href)},Ce=J.useEventCallback(u=>{R&&!u.repeat&&B&&u.key===" "&&y.stop(u,()=>{y.start(u)}),u.target===u.currentTarget&&te()&&u.key===" "&&u.preventDefault(),x&&x(u),u.target===u.currentTarget&&te()&&u.key==="Enter"&&!f&&(u.preventDefault(),C&&C(u))}),Ve=J.useEventCallback(u=>{R&&u.key===" "&&B&&!u.defaultPrevented&&y.stop(u,()=>{y.pulsate(u)}),M&&M(u),C&&u.target===u.currentTarget&&te()&&u.key===" "&&!u.defaultPrevented&&C(u)});let W=a;W==="button"&&(A.href||A.to)&&(W=b);const Y={};W==="button"?(Y.type=w===void 0?"button":w,Y.disabled=f):(!A.href&&!A.to&&(Y.role="button"),f&&(Y["aria-disabled"]=f));const De=le.useForkRef(e,X),re={...i,centerRipple:r,component:a,disabled:f,disableRipple:h,disableTouchRipple:m,focusRipple:R,tabIndex:V,focusVisible:B},ve=He(re);return F.jsxs(Je,{as:W,className:P.clsx(ve.root,p),ownerState:re,onBlur:xe,onClick:C,onContextMenu:ye,onFocus:Ee,onKeyDown:Ce,onKeyUp:Ve,onMouseDown:me,onMouseLeave:Pe,onMouseUp:be,onDragLeave:Te,onTouchEnd:Re,onTouchMove:Me,onTouchStart:ge,ref:De,tabIndex:f?-1:V,type:w,...Y,...A,children:[l,he?F.jsx(pe,{ref:de,center:r,...k}):null]})});function D(n,t,e,i=!1){return J.useEventCallback(s=>(e&&e(s),i||n[t](s),!0))}process.env.NODE_ENV!=="production"&&(fe.propTypes={action:Se.refType,centerRipple:o.PropTypes.bool,children:o.PropTypes.node,classes:o.PropTypes.object,className:o.PropTypes.string,component:ke.elementTypeAcceptingRef,disabled:o.PropTypes.bool,disableRipple:o.PropTypes.bool,disableTouchRipple:o.PropTypes.bool,focusRipple:o.PropTypes.bool,focusVisibleClassName:o.PropTypes.string,href:o.PropTypes.any,LinkComponent:o.PropTypes.elementType,onBlur:o.PropTypes.func,onClick:o.PropTypes.func,onContextMenu:o.PropTypes.func,onDragLeave:o.PropTypes.func,onFocus:o.PropTypes.func,onFocusVisible:o.PropTypes.func,onKeyDown:o.PropTypes.func,onKeyUp:o.PropTypes.func,onMouseDown:o.PropTypes.func,onMouseLeave:o.PropTypes.func,onMouseUp:o.PropTypes.func,onTouchEnd:o.PropTypes.func,onTouchMove:o.PropTypes.func,onTouchStart:o.PropTypes.func,sx:o.PropTypes.oneOfType([o.PropTypes.arrayOf(o.PropTypes.oneOfType([o.PropTypes.func,o.PropTypes.object,o.PropTypes.bool])),o.PropTypes.func,o.PropTypes.object]),tabIndex:o.PropTypes.number,TouchRippleProps:o.PropTypes.object,touchRippleRef:o.PropTypes.oneOfType([o.PropTypes.func,o.PropTypes.shape({current:o.PropTypes.shape({pulsate:o.PropTypes.func.isRequired,start:o.PropTypes.func.isRequired,stop:o.PropTypes.func.isRequired})})]),type:o.PropTypes.oneOfType([o.PropTypes.oneOf(["button","reset","submit"]),o.PropTypes.string])});exports.ButtonBase=fe;exports.TransitionGroup=ee;exports._extends=Z;
;