UNPKG

@cgi-learning-hub/ui

Version:

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

3 lines (2 loc) 5.49 kB
"use strict";const j=require("react"),o=require("./index-DLnSn8GT.cjs"),a=require("./identifier-BoZelETM.cjs"),B=require("./memoTheme-BKfsJx_F.cjs"),z=require("./createSimplePaletteValueFilter-PTK3TAhW.cjs"),l=require("react/jsx-runtime"),p=require("./DefaultPropsProvider-Cnf49AIv.cjs"),x=require("./useId-DNXtOFeX.cjs"),$=require("./ButtonBase-Dp6sf_dP.cjs"),q=require("./CircularProgress-CXXyPavb.cjs"),w=require("./chainPropTypes-CEUi6Jb4.cjs");function k(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const f=k(j);function O(e){return a.generateUtilityClass("MuiIconButton",e)}const b=a.generateUtilityClasses("MuiIconButton",["root","disabled","colorInherit","colorPrimary","colorSecondary","colorError","colorInfo","colorSuccess","colorWarning","edgeStart","edgeEnd","sizeSmall","sizeMedium","sizeLarge","loading","loadingIndicator","loadingWrapper"]),M=e=>{const{classes:t,disabled:r,color:n,edge:i,size:c,loading:d}=e,u={root:["root",d&&"loading",r&&"disabled",n!=="default"&&`color${a.capitalize(n)}`,i&&`edge${a.capitalize(i)}`,`size${a.capitalize(c)}`],loadingIndicator:["loadingIndicator"],loadingWrapper:["loadingWrapper"]};return p.composeClasses(u,O,t)},N=p.styled($.ButtonBase,{name:"MuiIconButton",slot:"Root",overridesResolver:(e,t)=>{const{ownerState:r}=e;return[t.root,r.loading&&t.loading,r.color!=="default"&&t[`color${a.capitalize(r.color)}`],r.edge&&t[`edge${a.capitalize(r.edge)}`],t[`size${a.capitalize(r.size)}`]]}})(B.memoTheme(({theme:e})=>({textAlign:"center",flex:"0 0 auto",fontSize:e.typography.pxToRem(24),padding:8,borderRadius:"50%",color:(e.vars||e).palette.action.active,transition:e.transitions.create("background-color",{duration:e.transitions.duration.shortest}),variants:[{props:t=>!t.disableRipple,style:{"--IconButton-hoverBg":e.vars?`rgba(${e.vars.palette.action.activeChannel} / ${e.vars.palette.action.hoverOpacity})`:a.alpha(e.palette.action.active,e.palette.action.hoverOpacity),"&:hover":{backgroundColor:"var(--IconButton-hoverBg)","@media (hover: none)":{backgroundColor:"transparent"}}}},{props:{edge:"start"},style:{marginLeft:-12}},{props:{edge:"start",size:"small"},style:{marginLeft:-3}},{props:{edge:"end"},style:{marginRight:-12}},{props:{edge:"end",size:"small"},style:{marginRight:-3}}]})),B.memoTheme(({theme:e})=>({variants:[{props:{color:"inherit"},style:{color:"inherit"}},...Object.entries(e.palette).filter(z.createSimplePaletteValueFilter()).map(([t])=>({props:{color:t},style:{color:(e.vars||e).palette[t].main}})),...Object.entries(e.palette).filter(z.createSimplePaletteValueFilter()).map(([t])=>({props:{color:t},style:{"--IconButton-hoverBg":e.vars?`rgba(${(e.vars||e).palette[t].mainChannel} / ${e.vars.palette.action.hoverOpacity})`:a.alpha((e.vars||e).palette[t].main,e.palette.action.hoverOpacity)}})),{props:{size:"small"},style:{padding:5,fontSize:e.typography.pxToRem(18)}},{props:{size:"large"},style:{padding:12,fontSize:e.typography.pxToRem(28)}}],[`&.${b.disabled}`]:{backgroundColor:"transparent",color:(e.vars||e).palette.action.disabled},[`&.${b.loading}`]:{color:"transparent"}}))),E=p.styled("span",{name:"MuiIconButton",slot:"LoadingIndicator"})(({theme:e})=>({display:"none",position:"absolute",visibility:"visible",top:"50%",left:"50%",transform:"translate(-50%, -50%)",color:(e.vars||e).palette.action.disabled,variants:[{props:{loading:!0},style:{display:"flex"}}]})),R=f.forwardRef(function(t,r){const n=p.useDefaultProps({props:t,name:"MuiIconButton"}),{edge:i=!1,children:c,className:d,color:u="default",disabled:P=!1,disableFocusRipple:v=!1,size:h="medium",id:T,loading:s=null,loadingIndicator:C,...S}=n,I=x.useId(T),m=C??l.jsx(q.CircularProgress,{"aria-labelledby":I,color:"inherit",size:16}),g={...n,edge:i,color:u,disabled:P,disableFocusRipple:v,loading:s,loadingIndicator:m,size:h},y=M(g);return l.jsxs(N,{id:s?I:T,className:a.clsx(y.root,d),centerRipple:!0,focusRipple:!v,disabled:P||s,ref:r,...S,ownerState:g,children:[typeof s=="boolean"&&l.jsx("span",{className:y.loadingWrapper,style:{display:"contents"},children:l.jsx(E,{className:y.loadingIndicator,ownerState:g,children:s&&m})}),c]})});process.env.NODE_ENV!=="production"&&(R.propTypes={children:w.chainPropTypes(o.PropTypes.node,e=>f.Children.toArray(e.children).some(r=>f.isValidElement(r)&&r.props.onClick)?new Error(["MUI: You are providing an onClick event listener to a child of a button element.","Prefer applying it to the IconButton directly.","This guarantees that the whole <button> will be responsive to click events."].join(` `)):null),classes:o.PropTypes.object,className:o.PropTypes.string,color:o.PropTypes.oneOfType([o.PropTypes.oneOf(["inherit","default","primary","secondary","error","info","success","warning"]),o.PropTypes.string]),disabled:o.PropTypes.bool,disableFocusRipple:o.PropTypes.bool,disableRipple:o.PropTypes.bool,edge:o.PropTypes.oneOf(["end","start",!1]),id:o.PropTypes.string,loading:o.PropTypes.bool,loadingIndicator:o.PropTypes.node,size:o.PropTypes.oneOfType([o.PropTypes.oneOf(["small","medium","large"]),o.PropTypes.string]),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])});exports.IconButton=R;exports.getIconButtonUtilityClass=O;exports.iconButtonClasses=b;