@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
268 lines (267 loc) • 7.19 kB
JavaScript
import * as v from "react";
import { P as o } from "./index-Sy88PpwE.js";
import { F as S, G as V, S as l, n as c, H as F, K as w } from "./identifier-PWESmBq6.js";
import { u as P } from "./useTheme-XJ9sFCWX.js";
import { jsx as j } from "react/jsx-runtime";
import { u as A, s as R, c as N } from "./DefaultPropsProvider-DqazQPtr.js";
import { m as M } from "./memoTheme-DAFDflPY.js";
import { c as B } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { T as U } from "./Typography-Dy8r_tT2.js";
import { i as h } from "./isFocusVisible-CPZqtjv2.js";
import { e as z } from "./elementTypeAcceptingRef-DOeckaXy.js";
function H(e) {
return V("MuiLink", e);
}
const E = S("MuiLink", ["root", "underlineNone", "underlineHover", "underlineAlways", "button", "focusVisible"]), W = ({
theme: e,
ownerState: r
}) => {
const n = r.color, t = l(e, `palette.${n}.main`, !1) || l(e, `palette.${n}`, !1) || r.color, s = l(e, `palette.${n}.mainChannel`) || l(e, `palette.${n}Channel`);
return "vars" in e && s ? `rgba(${s} / 0.4)` : c(t, 0.4);
}, k = {
primary: !0,
secondary: !0,
error: !0,
info: !0,
success: !0,
warning: !0,
textPrimary: !0,
textSecondary: !0,
textDisabled: !0
}, G = (e) => {
const {
classes: r,
component: n,
focusVisible: t,
underline: s
} = e, u = {
root: ["root", `underline${w(s)}`, n === "button" && "button", t && "focusVisible"]
};
return N(u, H, r);
}, K = R(U, {
name: "MuiLink",
slot: "Root",
overridesResolver: (e, r) => {
const {
ownerState: n
} = e;
return [r.root, r[`underline${w(n.underline)}`], n.component === "button" && r.button];
}
})(M(({
theme: e
}) => ({
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)"
}
}, ...Object.entries(e.palette).filter(B()).map(([r]) => ({
props: {
underline: "always",
color: r
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette[r].mainChannel} / 0.4)` : c(e.palette[r].main, 0.4)
}
})), {
props: {
underline: "always",
color: "textPrimary"
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette.text.primaryChannel} / 0.4)` : c(e.palette.text.primary, 0.4)
}
}, {
props: {
underline: "always",
color: "textSecondary"
},
style: {
"--Link-underlineColor": e.vars ? `rgba(${e.vars.palette.text.secondaryChannel} / 0.4)` : c(e.palette.text.secondary, 0.4)
}
}, {
props: {
underline: "always",
color: "textDisabled"
},
style: {
"--Link-underlineColor": (e.vars || e).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"
}
}
}]
}))), _ = /* @__PURE__ */ v.forwardRef(function(r, n) {
const t = A({
props: r,
name: "MuiLink"
}), s = P(), {
className: u,
color: a = "primary",
component: y = "a",
onBlur: f,
onFocus: m,
TypographyClasses: L,
underline: b = "always",
variant: g = "inherit",
sx: p,
...x
} = t, [T, C] = v.useState(!1), D = (i) => {
h(i.target) || C(!1), f && f(i);
}, $ = (i) => {
h(i.target) && C(!0), m && m(i);
}, d = {
...t,
color: a,
component: y,
focusVisible: T,
underline: b,
variant: g
}, O = G(d);
return /* @__PURE__ */ j(K, {
color: a,
className: F(O.root, u),
classes: L,
component: y,
onBlur: D,
onFocus: $,
ref: n,
ownerState: d,
variant: g,
...x,
sx: [...k[a] === void 0 ? [{
color: a
}] : [], ...Array.isArray(p) ? p : [p]],
style: {
...x.style,
...b === "always" && a !== "inherit" && !k[a] && {
"--Link-underlineColor": W({
theme: s,
ownerState: d
})
}
}
});
});
process.env.NODE_ENV !== "production" && (_.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: o.node,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* The color of the link.
* @default 'primary'
*/
color: o.oneOfType([o.oneOf(["primary", "secondary", "success", "error", "info", "warning", "textPrimary", "textSecondary", "textDisabled"]), o.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: z,
/**
* @ignore
*/
onBlur: o.func,
/**
* @ignore
*/
onFocus: o.func,
/**
* @ignore
*/
style: o.object,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: o.oneOfType([o.arrayOf(o.oneOfType([o.func, o.object, o.bool])), o.func, o.object]),
/**
* `classes` prop applied to the [`Typography`](https://mui.com/material-ui/api/typography/) element.
*/
TypographyClasses: o.object,
/**
* Controls when the link should have an underline.
* @default 'always'
*/
underline: o.oneOf(["always", "hover", "none"]),
/**
* Applies the theme typography styles.
* @default 'inherit'
*/
variant: o.oneOfType([o.oneOf(["body1", "body2", "button", "caption", "h1", "h2", "h3", "h4", "h5", "h6", "inherit", "overline", "subtitle1", "subtitle2"]), o.string])
});
export {
_ as L,
H as g,
E as l
};