@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
300 lines (299 loc) • 8.77 kB
JavaScript
import * as f from "react";
import { P as e } from "./index-B9vkf41S.js";
import { F as T, G as x, H as P } from "./generateUtilityClasses-B_xKAflz.js";
import { m as B } from "./memoTheme-C-PaH-Cy.js";
import { c as z } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { jsxs as w, jsx as u } from "react/jsx-runtime";
import { u as j, s as C, c as $ } from "./DefaultPropsProvider-BrmlvPWg.js";
import { u as k } from "./useId-CK6Kn3Tn.js";
import { c as t } from "./capitalize-BHEX83JQ.js";
import { B as M } from "./ButtonBase-C2jRC_V7.js";
import { C as N } from "./CircularProgress-CLq0Rl-1.js";
import { c as E } from "./chainPropTypes-D9lkm76m.js";
function L(o) {
return x("MuiIconButton", o);
}
const R = T("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), U = (o) => {
const {
classes: r,
disabled: a,
color: n,
edge: s,
size: l,
loading: c
} = o, d = {
root: ["root", c && "loading", a && "disabled", n !== "default" && `color${t(n)}`, s && `edge${t(s)}`, `size${t(l)}`],
loadingIndicator: ["loadingIndicator"],
loadingWrapper: ["loadingWrapper"]
};
return $(d, L, r);
}, W = C(M, {
name: "MuiIconButton",
slot: "Root",
overridesResolver: (o, r) => {
const {
ownerState: a
} = o;
return [r.root, a.loading && r.loading, a.color !== "default" && r[`color${t(a.color)}`], a.edge && r[`edge${t(a.edge)}`], r[`size${t(a.size)}`]];
}
})(B(({
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: (r) => !r.disableRipple,
style: {
"--IconButton-hoverBg": o.alpha((o.vars || o).palette.action.active, (o.vars || 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
}
}]
})), B(({
theme: o
}) => ({
variants: [{
props: {
color: "inherit"
},
style: {
color: "inherit"
}
}, ...Object.entries(o.palette).filter(z()).map(([r]) => ({
props: {
color: r
},
style: {
color: (o.vars || o).palette[r].main
}
})), ...Object.entries(o.palette).filter(z()).map(([r]) => ({
props: {
color: r
},
style: {
"--IconButton-hoverBg": o.alpha((o.vars || o).palette[r].main, (o.vars || 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)
}
}],
[`&.${R.disabled}`]: {
backgroundColor: "transparent",
color: (o.vars || o).palette.action.disabled
},
[`&.${R.loading}`]: {
color: "transparent"
}
}))), F = C("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"
}
}]
})), V = /* @__PURE__ */ f.forwardRef(function(r, a) {
const n = j({
props: r,
name: "MuiIconButton"
}), {
edge: s = !1,
children: l,
className: c,
color: d = "default",
disabled: m = !1,
disableFocusRipple: y = !1,
size: h = "medium",
id: b,
loading: i = null,
loadingIndicator: O,
...S
} = n, v = k(b), I = O ?? /* @__PURE__ */ u(N, {
"aria-labelledby": v,
color: "inherit",
size: 16
}), p = {
...n,
edge: s,
color: d,
disabled: m,
disableFocusRipple: y,
loading: i,
loadingIndicator: I,
size: h
}, g = U(p);
return /* @__PURE__ */ w(W, {
id: i ? v : b,
className: P(g.root, c),
centerRipple: !0,
focusRipple: !y,
disabled: m || i,
ref: a,
...S,
ownerState: p,
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(F, {
className: g.loadingIndicator,
ownerState: p,
children: i && I
})
}), l]
});
});
process.env.NODE_ENV !== "production" && (V.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: E(e.node, (o) => f.Children.toArray(o.children).some((a) => /* @__PURE__ */ f.isValidElement(a) && a.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 {
V as I,
L as g,
R as i
};