@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
722 lines (721 loc) • 22 kB
JavaScript
import * as n from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as Je, G as Qe, H as ge, K as ve, n as Re } from "./identifier-PWESmBq6.js";
import { u as Ze } from "./index-DX2Sl0Ig.js";
import { u as eo } from "./useTheme-XJ9sFCWX.js";
import { jsx as L, jsxs as Te } from "react/jsx-runtime";
import { u as oo, s as G, c as to } from "./DefaultPropsProvider-DqazQPtr.js";
import { m as Y } from "./memoTheme-DAFDflPY.js";
import { u as I } from "./useSlot-BzdKwDQ5.js";
import { u as j, T as ro } from "./useTimeout-CrCYVizI.js";
import { u as po } from "./useControlled-nm4pBabJ.js";
import { u as no } from "./useId-CK6Kn3Tn.js";
import { a as be } from "./useEventCallback-Y2KwRxBw.js";
import { u as so } from "./useForkRef-u29GSuCu.js";
import { g as io, e as ao } from "./elementAcceptingRef-CEweUuUA.js";
import { G as lo } from "./Grow-BfjkXlG8.js";
import { P as Oe } from "./Popper-CfFLBZ7-.js";
import { i as ye } from "./isFocusVisible-CPZqtjv2.js";
function co(r) {
return Qe("MuiTooltip", r);
}
const p = Je("MuiTooltip", ["popper", "popperInteractive", "popperArrow", "popperClose", "tooltip", "tooltipArrow", "touch", "tooltipPlacementLeft", "tooltipPlacementRight", "tooltipPlacementTop", "tooltipPlacementBottom", "arrow"]);
function mo(r) {
return Math.round(r * 1e5) / 1e5;
}
const uo = (r) => {
const {
classes: o,
disableInteractive: s,
arrow: d,
touch: O,
placement: b
} = r, K = {
popper: ["popper", !s && "popperInteractive", d && "popperArrow"],
tooltip: ["tooltip", d && "tooltipArrow", O && "touch", `tooltipPlacement${ve(b.split("-")[0])}`],
arrow: ["arrow"]
};
return to(K, co, o);
}, fo = G(Oe, {
name: "MuiTooltip",
slot: "Popper",
overridesResolver: (r, o) => {
const {
ownerState: s
} = r;
return [o.popper, !s.disableInteractive && o.popperInteractive, s.arrow && o.popperArrow, !s.open && o.popperClose];
}
})(Y(({
theme: r
}) => ({
zIndex: (r.vars || r).zIndex.tooltip,
pointerEvents: "none",
variants: [{
props: ({
ownerState: o
}) => !o.disableInteractive,
style: {
pointerEvents: "auto"
}
}, {
props: ({
open: o
}) => !o,
style: {
pointerEvents: "none"
}
}, {
props: ({
ownerState: o
}) => o.arrow,
style: {
[`&[data-popper-placement*="bottom"] .${p.arrow}`]: {
top: 0,
marginTop: "-0.71em",
"&::before": {
transformOrigin: "0 100%"
}
},
[`&[data-popper-placement*="top"] .${p.arrow}`]: {
bottom: 0,
marginBottom: "-0.71em",
"&::before": {
transformOrigin: "100% 0"
}
},
[`&[data-popper-placement*="right"] .${p.arrow}`]: {
height: "1em",
width: "0.71em",
"&::before": {
transformOrigin: "100% 100%"
}
},
[`&[data-popper-placement*="left"] .${p.arrow}`]: {
height: "1em",
width: "0.71em",
"&::before": {
transformOrigin: "0 0"
}
}
}
}, {
props: ({
ownerState: o
}) => o.arrow && !o.isRtl,
style: {
[`&[data-popper-placement*="right"] .${p.arrow}`]: {
left: 0,
marginLeft: "-0.71em"
}
}
}, {
props: ({
ownerState: o
}) => o.arrow && !!o.isRtl,
style: {
[`&[data-popper-placement*="right"] .${p.arrow}`]: {
right: 0,
marginRight: "-0.71em"
}
}
}, {
props: ({
ownerState: o
}) => o.arrow && !o.isRtl,
style: {
[`&[data-popper-placement*="left"] .${p.arrow}`]: {
right: 0,
marginRight: "-0.71em"
}
}
}, {
props: ({
ownerState: o
}) => o.arrow && !!o.isRtl,
style: {
[`&[data-popper-placement*="left"] .${p.arrow}`]: {
left: 0,
marginLeft: "-0.71em"
}
}
}]
}))), ho = G("div", {
name: "MuiTooltip",
slot: "Tooltip",
overridesResolver: (r, o) => {
const {
ownerState: s
} = r;
return [o.tooltip, s.touch && o.touch, s.arrow && o.tooltipArrow, o[`tooltipPlacement${ve(s.placement.split("-")[0])}`]];
}
})(Y(({
theme: r
}) => ({
backgroundColor: r.vars ? r.vars.palette.Tooltip.bg : Re(r.palette.grey[700], 0.92),
borderRadius: (r.vars || r).shape.borderRadius,
color: (r.vars || r).palette.common.white,
fontFamily: r.typography.fontFamily,
padding: "4px 8px",
fontSize: r.typography.pxToRem(11),
maxWidth: 300,
margin: 2,
wordWrap: "break-word",
fontWeight: r.typography.fontWeightMedium,
[`.${p.popper}[data-popper-placement*="left"] &`]: {
transformOrigin: "right center"
},
[`.${p.popper}[data-popper-placement*="right"] &`]: {
transformOrigin: "left center"
},
[`.${p.popper}[data-popper-placement*="top"] &`]: {
transformOrigin: "center bottom",
marginBottom: "14px"
},
[`.${p.popper}[data-popper-placement*="bottom"] &`]: {
transformOrigin: "center top",
marginTop: "14px"
},
variants: [{
props: ({
ownerState: o
}) => o.arrow,
style: {
position: "relative",
margin: 0
}
}, {
props: ({
ownerState: o
}) => o.touch,
style: {
padding: "8px 16px",
fontSize: r.typography.pxToRem(14),
lineHeight: `${mo(16 / 14)}em`,
fontWeight: r.typography.fontWeightRegular
}
}, {
props: ({
ownerState: o
}) => !o.isRtl,
style: {
[`.${p.popper}[data-popper-placement*="left"] &`]: {
marginRight: "14px"
},
[`.${p.popper}[data-popper-placement*="right"] &`]: {
marginLeft: "14px"
}
}
}, {
props: ({
ownerState: o
}) => !o.isRtl && o.touch,
style: {
[`.${p.popper}[data-popper-placement*="left"] &`]: {
marginRight: "24px"
},
[`.${p.popper}[data-popper-placement*="right"] &`]: {
marginLeft: "24px"
}
}
}, {
props: ({
ownerState: o
}) => !!o.isRtl,
style: {
[`.${p.popper}[data-popper-placement*="left"] &`]: {
marginLeft: "14px"
},
[`.${p.popper}[data-popper-placement*="right"] &`]: {
marginRight: "14px"
}
}
}, {
props: ({
ownerState: o
}) => !!o.isRtl && o.touch,
style: {
[`.${p.popper}[data-popper-placement*="left"] &`]: {
marginLeft: "24px"
},
[`.${p.popper}[data-popper-placement*="right"] &`]: {
marginRight: "24px"
}
}
}, {
props: ({
ownerState: o
}) => o.touch,
style: {
[`.${p.popper}[data-popper-placement*="top"] &`]: {
marginBottom: "24px"
}
}
}, {
props: ({
ownerState: o
}) => o.touch,
style: {
[`.${p.popper}[data-popper-placement*="bottom"] &`]: {
marginTop: "24px"
}
}
}]
}))), go = G("span", {
name: "MuiTooltip",
slot: "Arrow"
})(Y(({
theme: r
}) => ({
overflow: "hidden",
position: "absolute",
width: "1em",
height: "0.71em",
boxSizing: "border-box",
color: r.vars ? r.vars.palette.Tooltip.bg : Re(r.palette.grey[700], 0.9),
"&::before": {
content: '""',
margin: "auto",
display: "block",
width: "100%",
height: "100%",
backgroundColor: "currentColor",
transform: "rotate(45deg)"
}
})));
let A = !1;
const we = new ro();
let R = {
x: 0,
y: 0
};
function D(r, o) {
return (s, ...d) => {
o && o(s, ...d), r(s, ...d);
};
}
const To = /* @__PURE__ */ n.forwardRef(function(o, s) {
const d = oo({
props: o,
name: "MuiTooltip"
}), {
arrow: O = !1,
children: b,
classes: K,
components: P = {},
componentsProps: x = {},
describeChild: Pe = !1,
disableFocusListener: xe = !1,
disableHoverListener: q = !1,
disableInteractive: Ce = !1,
disableTouchListener: Me = !1,
enterDelay: X = 100,
enterNextDelay: J = 0,
enterTouchDelay: Ee = 700,
followCursor: k = !1,
id: Se,
leaveDelay: Q = 0,
leaveTouchDelay: $e = 1500,
onClose: Z,
onOpen: ee,
open: oe,
placement: te = "bottom",
PopperComponent: re,
PopperProps: f = {},
slotProps: h = {},
slots: Ne = {},
title: g,
TransitionComponent: Le,
TransitionProps: Ie,
...pe
} = d, m = /* @__PURE__ */ n.isValidElement(b) ? b : /* @__PURE__ */ L("span", {
children: b
}), ne = eo(), je = Ze(), [i, se] = n.useState(), [F, Ae] = n.useState(null), C = n.useRef(!1), U = Ce || k, ie = j(), W = j(), M = j(), ae = j(), [De, le] = po({
controlled: oe,
default: !1,
name: "Tooltip",
state: "open"
});
let u = De;
if (process.env.NODE_ENV !== "production") {
const {
current: t
} = n.useRef(oe !== void 0);
n.useEffect(() => {
i && i.disabled && !t && g !== "" && i.tagName.toLowerCase() === "button" && console.warn(["MUI: You are providing a disabled `button` child to the Tooltip component.", "A disabled element does not fire events.", "Tooltip needs to listen to the child element's events to display the title.", "", "Add a simple wrapper element, such as a `span`."].join(`
`));
}, [g, i, t]);
}
const B = no(Se), y = n.useRef(), E = be(() => {
y.current !== void 0 && (document.body.style.WebkitUserSelect = y.current, y.current = void 0), ae.clear();
});
n.useEffect(() => E, [E]);
const ce = (t) => {
we.clear(), A = !0, le(!0), ee && !u && ee(t);
}, S = be(
/**
* @param {React.SyntheticEvent | Event} event
*/
(t) => {
we.start(800 + Q, () => {
A = !1;
}), le(!1), Z && u && Z(t), ie.start(ne.transitions.duration.shortest, () => {
C.current = !1;
});
}
), $ = (t) => {
C.current && t.type !== "touchstart" || (i && i.removeAttribute("title"), W.clear(), M.clear(), X || A && J ? W.start(A ? J : X, () => {
ce(t);
}) : ce(t));
}, V = (t) => {
W.clear(), M.start(Q, () => {
S(t);
});
}, [, me] = n.useState(!1), ue = (t) => {
ye(t.target) || (me(!1), V(t));
}, de = (t) => {
i || se(t.currentTarget), ye(t.target) && (me(!0), $(t));
}, fe = (t) => {
C.current = !0;
const c = m.props;
c.onTouchStart && c.onTouchStart(t);
}, ke = (t) => {
fe(t), M.clear(), ie.clear(), E(), y.current = document.body.style.WebkitUserSelect, document.body.style.WebkitUserSelect = "none", ae.start(Ee, () => {
document.body.style.WebkitUserSelect = y.current, $(t);
});
}, Fe = (t) => {
m.props.onTouchEnd && m.props.onTouchEnd(t), E(), M.start($e, () => {
S(t);
});
};
n.useEffect(() => {
if (!u)
return;
function t(c) {
c.key === "Escape" && S(c);
}
return document.addEventListener("keydown", t), () => {
document.removeEventListener("keydown", t);
};
}, [S, u]);
const Ue = so(io(m), se, s);
!g && g !== 0 && (u = !1);
const z = n.useRef(), We = (t) => {
const c = m.props;
c.onMouseMove && c.onMouseMove(t), R = {
x: t.clientX,
y: t.clientY
}, z.current && z.current.update();
}, w = {}, H = typeof g == "string";
Pe ? (w.title = !u && H && !q ? g : null, w["aria-describedby"] = u ? B : null) : (w["aria-label"] = H ? g : null, w["aria-labelledby"] = u && !H ? B : null);
const a = {
...w,
...pe,
...m.props,
className: ge(pe.className, m.props.className),
onTouchStart: fe,
ref: Ue,
...k ? {
onMouseMove: We
} : {}
};
process.env.NODE_ENV !== "production" && (a["data-mui-internal-clone-element"] = !0, n.useEffect(() => {
i && !i.getAttribute("data-mui-internal-clone-element") && console.error(["MUI: The `children` component of the Tooltip is not forwarding its props correctly.", "Please make sure that props are spread on the same element that the ref is applied to."].join(`
`));
}, [i]));
const v = {};
Me || (a.onTouchStart = ke, a.onTouchEnd = Fe), q || (a.onMouseOver = D($, a.onMouseOver), a.onMouseLeave = D(V, a.onMouseLeave), U || (v.onMouseOver = $, v.onMouseLeave = V)), xe || (a.onFocus = D(de, a.onFocus), a.onBlur = D(ue, a.onBlur), U || (v.onFocus = de, v.onBlur = ue)), process.env.NODE_ENV !== "production" && m.props.title && console.error(["MUI: You have provided a `title` prop to the child of <Tooltip />.", `Remove this title prop \`${m.props.title}\` or the Tooltip component.`].join(`
`));
const T = {
...d,
isRtl: je,
arrow: O,
disableInteractive: U,
placement: te,
PopperComponentProp: re,
touch: C.current
}, l = typeof h.popper == "function" ? h.popper(T) : h.popper, Be = n.useMemo(() => {
var c, he;
let t = [{
name: "arrow",
enabled: !!F,
options: {
element: F,
padding: 4
}
}];
return (c = f.popperOptions) != null && c.modifiers && (t = t.concat(f.popperOptions.modifiers)), (he = l == null ? void 0 : l.popperOptions) != null && he.modifiers && (t = t.concat(l.popperOptions.modifiers)), {
...f.popperOptions,
...l == null ? void 0 : l.popperOptions,
modifiers: t
};
}, [F, f.popperOptions, l == null ? void 0 : l.popperOptions]), _ = uo(T), Ve = typeof h.transition == "function" ? h.transition(T) : h.transition, N = {
slots: {
popper: P.Popper,
transition: P.Transition ?? Le,
tooltip: P.Tooltip,
arrow: P.Arrow,
...Ne
},
slotProps: {
arrow: h.arrow ?? x.arrow,
popper: {
...f,
...l ?? x.popper
},
// resolvedPopperProps can be spread because it's already an object
tooltip: h.tooltip ?? x.tooltip,
transition: {
...Ie,
...Ve ?? x.transition
}
}
}, [ze, He] = I("popper", {
elementType: fo,
externalForwardedProps: N,
ownerState: T,
className: ge(_.popper, f == null ? void 0 : f.className)
}), [_e, Ge] = I("transition", {
elementType: lo,
externalForwardedProps: N,
ownerState: T
}), [Ye, Ke] = I("tooltip", {
elementType: ho,
className: _.tooltip,
externalForwardedProps: N,
ownerState: T
}), [qe, Xe] = I("arrow", {
elementType: go,
className: _.arrow,
externalForwardedProps: N,
ownerState: T,
ref: Ae
});
return /* @__PURE__ */ Te(n.Fragment, {
children: [/* @__PURE__ */ n.cloneElement(m, a), /* @__PURE__ */ L(ze, {
as: re ?? Oe,
placement: te,
anchorEl: k ? {
getBoundingClientRect: () => ({
top: R.y,
left: R.x,
right: R.x,
bottom: R.y,
width: 0,
height: 0
})
} : i,
popperRef: z,
open: i ? u : !1,
id: B,
transition: !0,
...v,
...He,
popperOptions: Be,
children: ({
TransitionProps: t
}) => /* @__PURE__ */ L(_e, {
timeout: ne.transitions.duration.shorter,
...t,
...Ge,
children: /* @__PURE__ */ Te(Ye, {
...Ke,
children: [g, O ? /* @__PURE__ */ L(qe, {
...Xe
}) : null]
})
})
})]
});
});
process.env.NODE_ENV !== "production" && (To.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* If `true`, adds an arrow to the tooltip.
* @default false
*/
arrow: e.bool,
/**
* Tooltip reference element.
*/
children: ao.isRequired,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The components used for each slot inside.
*
* @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
components: e.shape({
Arrow: e.elementType,
Popper: e.elementType,
Tooltip: e.elementType,
Transition: e.elementType
}),
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*
* @default {}
*/
componentsProps: e.shape({
arrow: e.object,
popper: e.object,
tooltip: e.object,
transition: e.object
}),
/**
* Set to `true` if the `title` acts as an accessible description.
* By default the `title` acts as an accessible label for the child.
* @default false
*/
describeChild: e.bool,
/**
* Do not respond to focus-visible events.
* @default false
*/
disableFocusListener: e.bool,
/**
* Do not respond to hover events.
* @default false
*/
disableHoverListener: e.bool,
/**
* Makes a tooltip not interactive, i.e. it will close when the user
* hovers over the tooltip before the `leaveDelay` is expired.
* @default false
*/
disableInteractive: e.bool,
/**
* Do not respond to long press touch events.
* @default false
*/
disableTouchListener: e.bool,
/**
* The number of milliseconds to wait before showing the tooltip.
* This prop won't impact the enter touch delay (`enterTouchDelay`).
* @default 100
*/
enterDelay: e.number,
/**
* The number of milliseconds to wait before showing the tooltip when one was already recently opened.
* @default 0
*/
enterNextDelay: e.number,
/**
* The number of milliseconds a user must touch the element before showing the tooltip.
* @default 700
*/
enterTouchDelay: e.number,
/**
* If `true`, the tooltip follow the cursor over the wrapped element.
* @default false
*/
followCursor: e.bool,
/**
* This prop is used to help implement the accessibility logic.
* If you don't provide this prop. It falls back to a randomly generated id.
*/
id: e.string,
/**
* The number of milliseconds to wait before hiding the tooltip.
* This prop won't impact the leave touch delay (`leaveTouchDelay`).
* @default 0
*/
leaveDelay: e.number,
/**
* The number of milliseconds after the user stops touching an element before hiding the tooltip.
* @default 1500
*/
leaveTouchDelay: e.number,
/**
* Callback fired when the component requests to be closed.
*
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onClose: e.func,
/**
* Callback fired when the component requests to be open.
*
* @param {React.SyntheticEvent} event The event source of the callback.
*/
onOpen: e.func,
/**
* If `true`, the component is shown.
*/
open: e.bool,
/**
* Tooltip placement.
* @default 'bottom'
*/
placement: e.oneOf(["auto-end", "auto-start", "auto", "bottom-end", "bottom-start", "bottom", "left-end", "left-start", "left", "right-end", "right-start", "right", "top-end", "top-start", "top"]),
/**
* The component used for the popper.
* @deprecated use the `slots.popper` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
PopperComponent: e.elementType,
/**
* Props applied to the [`Popper`](https://mui.com/material-ui/api/popper/) element.
* @deprecated use the `slotProps.popper` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
PopperProps: e.object,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: e.shape({
arrow: e.oneOfType([e.func, e.object]),
popper: e.oneOfType([e.func, e.object]),
tooltip: e.oneOfType([e.func, e.object]),
transition: e.oneOfType([e.func, e.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: e.shape({
arrow: e.elementType,
popper: e.elementType,
tooltip: e.elementType,
transition: e.elementType
}),
/**
* 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]),
/**
* Tooltip title. Zero-length titles string, undefined, null and false are never displayed.
*/
title: e.node,
/**
* The component used for the transition.
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
* @deprecated use the `slots.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
TransitionComponent: e.elementType,
/**
* Props applied to the transition element.
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
* @deprecated use the `slotProps.transition` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
* @default {}
*/
TransitionProps: e.object
});
export {
To as T,
co as g,
p as t
};