@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
282 lines (281 loc) • 7.48 kB
JavaScript
import * as g from "react";
import { P as e } from "./index-B9vkf41S.js";
import { F as O, G as $, S as i, n as V, H as F } from "./generateUtilityClasses-B_xKAflz.js";
import { u as P } from "./useTheme-0AkY41zn.js";
import { jsx as j } from "react/jsx-runtime";
import { u as A, s as R, c as N } from "./DefaultPropsProvider-BrmlvPWg.js";
import { m as M } from "./memoTheme-C-PaH-Cy.js";
import { c as B } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { c as h } from "./capitalize-BHEX83JQ.js";
import { T as U } from "./Typography-Cr-aIusw.js";
import { i as v } from "./isFocusVisible-CPZqtjv2.js";
import { e as z } from "./elementTypeAcceptingRef-vRb2iI4O.js";
function H(o) {
return $("MuiLink", o);
}
const E = O("MuiLink", ["root", "underlineNone", "underlineHover", "underlineAlways", "button", "focusVisible"]), W = ({
theme: o,
ownerState: r
}) => {
const n = r.color;
if ("colorSpace" in o && o.colorSpace) {
const l = i(o, `palette.${n}.main`) || i(o, `palette.${n}`) || r.color;
return o.alpha(l, 0.4);
}
const t = i(o, `palette.${n}.main`, !1) || i(o, `palette.${n}`, !1) || r.color, s = i(o, `palette.${n}.mainChannel`) || i(o, `palette.${n}Channel`);
return "vars" in o && s ? `rgba(${s} / 0.4)` : V(t, 0.4);
}, k = {
primary: !0,
secondary: !0,
error: !0,
info: !0,
success: !0,
warning: !0,
textPrimary: !0,
textSecondary: !0,
textDisabled: !0
}, G = (o) => {
const {
classes: r,
component: n,
focusVisible: t,
underline: s
} = o, l = {
root: ["root", `underline${h(s)}`, n === "button" && "button", t && "focusVisible"]
};
return N(l, H, r);
}, _ = R(U, {
name: "MuiLink",
slot: "Root",
overridesResolver: (o, r) => {
const {
ownerState: n
} = o;
return [r.root, r[`underline${h(n.underline)}`], n.component === "button" && r.button];
}
})(M(({
theme: o
}) => ({
variants: [{
props: {
underline: "none"
},
style: {
textDecoration: "none"
}
}, {
props: {
underline: "hover"
},
style: {
textDecoration: "none",
"&:hover": {
textDecoration: "underline"
}
}
}, {
props: {
underline: "always"
},
style: {
textDecoration: "underline",
"&:hover": {
textDecorationColor: "inherit"
}
}
}, {
props: ({
underline: r,
ownerState: n
}) => r === "always" && n.color !== "inherit",
style: {
textDecorationColor: "var(--Link-underlineColor)"
}
}, {
props: ({
underline: r,
ownerState: n
}) => r === "always" && n.color === "inherit",
style: o.colorSpace ? {
textDecorationColor: o.alpha("currentColor", 0.4)
} : null
}, ...Object.entries(o.palette).filter(B()).map(([r]) => ({
props: {
underline: "always",
color: r
},
style: {
"--Link-underlineColor": o.alpha((o.vars || o).palette[r].main, 0.4)
}
})), {
props: {
underline: "always",
color: "textPrimary"
},
style: {
"--Link-underlineColor": o.alpha((o.vars || o).palette.text.primary, 0.4)
}
}, {
props: {
underline: "always",
color: "textSecondary"
},
style: {
"--Link-underlineColor": o.alpha((o.vars || o).palette.text.secondary, 0.4)
}
}, {
props: {
underline: "always",
color: "textDisabled"
},
style: {
"--Link-underlineColor": (o.vars || o).palette.text.disabled
}
}, {
props: {
component: "button"
},
style: {
position: "relative",
WebkitTapHighlightColor: "transparent",
backgroundColor: "transparent",
// Reset default value
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
border: 0,
margin: 0,
// Remove the margin in Safari
borderRadius: 0,
padding: 0,
// Remove the padding in Firefox
cursor: "pointer",
userSelect: "none",
verticalAlign: "middle",
MozAppearance: "none",
// Reset
WebkitAppearance: "none",
// Reset
"&::-moz-focus-inner": {
borderStyle: "none"
// Remove Firefox dotted outline.
},
[`&.${E.focusVisible}`]: {
outline: "auto"
}
}
}]
}))), q = /* @__PURE__ */ g.forwardRef(function(r, n) {
const t = A({
props: r,
name: "MuiLink"
}), s = P(), {
className: l,
color: a = "primary",
component: y = "a",
onBlur: d,
onFocus: f,
TypographyClasses: w,
underline: m = "always",
variant: b = "inherit",
sx: p,
...x
} = t, [L, C] = g.useState(!1), T = (c) => {
v(c.target) || C(!1), d && d(c);
}, D = (c) => {
v(c.target) && C(!0), f && f(c);
}, u = {
...t,
color: a,
component: y,
focusVisible: L,
underline: m,
variant: b
}, S = G(u);
return /* @__PURE__ */ j(_, {
color: a,
className: F(S.root, l),
classes: w,
component: y,
onBlur: T,
onFocus: D,
ref: n,
ownerState: u,
variant: b,
...x,
sx: [...k[a] === void 0 ? [{
color: a
}] : [], ...Array.isArray(p) ? p : [p]],
style: {
...x.style,
...m === "always" && a !== "inherit" && !k[a] && {
"--Link-underlineColor": W({
theme: s,
ownerState: u
})
}
}
});
});
process.env.NODE_ENV !== "production" && (q.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The content of the component.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The color of the link.
* @default 'primary'
*/
color: e.oneOfType([e.oneOf(["primary", "secondary", "success", "error", "info", "warning", "textPrimary", "textSecondary", "textDisabled"]), e.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: z,
/**
* @ignore
*/
onBlur: e.func,
/**
* @ignore
*/
onFocus: e.func,
/**
* @ignore
*/
style: e.object,
/**
* 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]),
/**
* `classes` prop applied to the [`Typography`](https://mui.com/material-ui/api/typography/) element.
*/
TypographyClasses: e.object,
/**
* Controls when the link should have an underline.
* @default 'always'
*/
underline: e.oneOf(["always", "hover", "none"]),
/**
* Applies the theme typography styles.
* @default 'inherit'
*/
variant: e.oneOfType([e.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), e.string])
});
export {
q as L,
H as g,
E as l
};