@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
299 lines (298 loc) • 8.88 kB
JavaScript
import * as f from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as $, G as x, H as P, K as r, n as B } from "./identifier-PWESmBq6.js";
import { m as z } from "./memoTheme-DAFDflPY.js";
import { c as R } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { jsxs as w, jsx as u } from "react/jsx-runtime";
import { u as j, s as O, c as k } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as M } from "./useId-CK6Kn3Tn.js";
import { B as N } from "./ButtonBase-6TF6t2SP.js";
import { C as E } from "./CircularProgress-DZuYTFz-.js";
import { c as L } from "./chainPropTypes-D9lkm76m.js";
function U(o) {
return x("MuiIconButton", o);
}
const C = $("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), W = (o) => {
const {
classes: a,
disabled: t,
color: n,
edge: s,
size: l,
loading: c
} = o, p = {
root: ["root", c && "loading", t && "disabled", n !== "default" && `color${r(n)}`, s && `edge${r(s)}`, `size${r(l)}`],
loadingIndicator: ["loadingIndicator"],
loadingWrapper: ["loadingWrapper"]
};
return k(p, U, a);
}, F = O(N, {
name: "MuiIconButton",
slot: "Root",
overridesResolver: (o, a) => {
const {
ownerState: t
} = o;
return [a.root, t.loading && a.loading, t.color !== "default" && a[`color${r(t.color)}`], t.edge && a[`edge${r(t.edge)}`], a[`size${r(t.size)}`]];
}
})(z(({
theme: o
}) => ({
textAlign: "center",
flex: "0 0 auto",
fontSize: o.typography.pxToRem(24),
padding: 8,
borderRadius: "50%",
color: (o.vars || o).palette.action.active,
transition: o.transitions.create("background-color", {
duration: o.transitions.duration.shortest
}),
variants: [{
props: (a) => !a.disableRipple,
style: {
"--IconButton-hoverBg": o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : B(o.palette.action.active, o.palette.action.hoverOpacity),
"&:hover": {
backgroundColor: "var(--IconButton-hoverBg)",
// Reset on touch devices, it doesn't add specificity
"@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
}
}]
})), z(({
theme: o
}) => ({
variants: [{
props: {
color: "inherit"
},
style: {
color: "inherit"
}
}, ...Object.entries(o.palette).filter(R()).map(([a]) => ({
props: {
color: a
},
style: {
color: (o.vars || o).palette[a].main
}
})), ...Object.entries(o.palette).filter(R()).map(([a]) => ({
props: {
color: a
},
style: {
"--IconButton-hoverBg": o.vars ? `rgba(${(o.vars || o).palette[a].mainChannel} / ${o.vars.palette.action.hoverOpacity})` : B((o.vars || o).palette[a].main, o.palette.action.hoverOpacity)
}
})), {
props: {
size: "small"
},
style: {
padding: 5,
fontSize: o.typography.pxToRem(18)
}
}, {
props: {
size: "large"
},
style: {
padding: 12,
fontSize: o.typography.pxToRem(28)
}
}],
[`&.${C.disabled}`]: {
backgroundColor: "transparent",
color: (o.vars || o).palette.action.disabled
},
[`&.${C.loading}`]: {
color: "transparent"
}
}))), V = O("span", {
name: "MuiIconButton",
slot: "LoadingIndicator"
})(({
theme: o
}) => ({
display: "none",
position: "absolute",
visibility: "visible",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
color: (o.vars || o).palette.action.disabled,
variants: [{
props: {
loading: !0
},
style: {
display: "flex"
}
}]
})), A = /* @__PURE__ */ f.forwardRef(function(a, t) {
const n = j({
props: a,
name: "MuiIconButton"
}), {
edge: s = !1,
children: l,
className: c,
color: p = "default",
disabled: y = !1,
disableFocusRipple: m = !1,
size: h = "medium",
id: b,
loading: i = null,
loadingIndicator: S,
...T
} = n, v = M(b), I = S ?? /* @__PURE__ */ u(E, {
"aria-labelledby": v,
color: "inherit",
size: 16
}), d = {
...n,
edge: s,
color: p,
disabled: y,
disableFocusRipple: m,
loading: i,
loadingIndicator: I,
size: h
}, g = W(d);
return /* @__PURE__ */ w(F, {
id: i ? v : b,
className: P(g.root, c),
centerRipple: !0,
focusRipple: !m,
disabled: y || i,
ref: t,
...T,
ownerState: d,
children: [typeof i == "boolean" && // use plain HTML span to minimize the runtime overhead
/* @__PURE__ */ u("span", {
className: g.loadingWrapper,
style: {
display: "contents"
},
children: /* @__PURE__ */ u(V, {
className: g.loadingIndicator,
ownerState: d,
children: i && I
})
}), l]
});
});
process.env.NODE_ENV !== "production" && (A.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The icon to display.
*/
children: L(e.node, (o) => f.Children.toArray(o.children).some((t) => /* @__PURE__ */ f.isValidElement(t) && t.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),
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'default'
*/
color: e.oneOfType([e.oneOf(["inherit", "default", "primary", "secondary", "error", "info", "success", "warning"]), e.string]),
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: e.bool,
/**
* If `true`, the keyboard focus ripple is disabled.
* @default false
*/
disableFocusRipple: e.bool,
/**
* If `true`, the ripple effect is disabled.
*
* ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
* to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
* @default false
*/
disableRipple: e.bool,
/**
* If given, uses a negative margin to counteract the padding on one
* side (this is often helpful for aligning the left or right
* side of the icon with content above or below, without ruining the border
* size and shape).
* @default false
*/
edge: e.oneOf(["end", "start", !1]),
/**
* @ignore
*/
id: e.string,
/**
* If `true`, the loading indicator is visible and the button is disabled.
* If `true | false`, the loading wrapper is always rendered before the children to prevent [Google Translation Crash](https://github.com/mui/material-ui/issues/27853).
* @default null
*/
loading: e.bool,
/**
* Element placed before the children if the button is in loading state.
* The node should contain an element with `role="progressbar"` with an accessible name.
* By default, it renders a `CircularProgress` that is labeled by the button itself.
* @default <CircularProgress color="inherit" size={16} />
*/
loadingIndicator: e.node,
/**
* The size of the component.
* `small` is equivalent to the dense button styling.
* @default 'medium'
*/
size: e.oneOfType([e.oneOf(["small", "medium", "large"]), e.string]),
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
});
export {
A as I,
U as g,
C as i
};