@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
424 lines (423 loc) • 12.5 kB
JavaScript
import * as r from "react";
import { P as e } from "./index-Sy88PpwE.js";
import { F as x, G as L, H as C } from "./identifier-PWESmBq6.js";
import { i as w } from "./isHostComponent-kiaBvYVo.js";
import { m as q } from "./memoTheme-DAFDflPY.js";
import { a as h } from "./List-CB_cqCSw.js";
import { jsx as f, jsxs as O } from "react/jsx-runtime";
import { u as U, s as A, c as B } from "./DefaultPropsProvider-DqazQPtr.js";
import { i as F } from "./isMuiElement-DnSE4qG4.js";
import { u as J } from "./useForkRef-u29GSuCu.js";
import { e as K } from "./elementTypeAcceptingRef-DOeckaXy.js";
import { c as Q } from "./chainPropTypes-D9lkm76m.js";
function W(o) {
return L("MuiListItem", o);
}
const ht = x("MuiListItem", ["root", "container", "dense", "alignItemsFlexStart", "divider", "gutters", "padding", "secondaryAction"]);
function It(o) {
return L("MuiListItemButton", o);
}
const X = x("MuiListItemButton", ["root", "focusVisible", "dense", "alignItemsFlexStart", "disabled", "divider", "gutters", "selected"]);
function Z(o) {
return L("MuiListItemSecondaryAction", o);
}
x("MuiListItemSecondaryAction", ["root", "disableGutters"]);
const tt = (o) => {
const {
disableGutters: t,
classes: s
} = o;
return B({
root: ["root", t && "disableGutters"]
}, Z, s);
}, et = A("div", {
name: "MuiListItemSecondaryAction",
slot: "Root",
overridesResolver: (o, t) => {
const {
ownerState: s
} = o;
return [t.root, s.disableGutters && t.disableGutters];
}
})({
position: "absolute",
right: 16,
top: "50%",
transform: "translateY(-50%)",
variants: [{
props: ({
ownerState: o
}) => o.disableGutters,
style: {
right: 0
}
}]
}), S = /* @__PURE__ */ r.forwardRef(function(t, s) {
const n = U({
props: t,
name: "MuiListItemSecondaryAction"
}), {
className: i,
...l
} = n, p = r.useContext(h), a = {
...n,
disableGutters: p.disableGutters
}, g = tt(a);
return /* @__PURE__ */ f(et, {
className: C(g.root, i),
ownerState: a,
ref: s,
...l
});
});
process.env.NODE_ENV !== "production" && (S.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, normally an `IconButton` or selection control.
*/
children: e.node,
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: 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])
});
S.muiName = "ListItemSecondaryAction";
const ot = (o, t) => {
const {
ownerState: s
} = o;
return [t.root, s.dense && t.dense, s.alignItems === "flex-start" && t.alignItemsFlexStart, s.divider && t.divider, !s.disableGutters && t.gutters, !s.disablePadding && t.padding, s.hasSecondaryAction && t.secondaryAction];
}, st = (o) => {
const {
alignItems: t,
classes: s,
dense: n,
disableGutters: i,
disablePadding: l,
divider: p,
hasSecondaryAction: a
} = o;
return B({
root: ["root", n && "dense", !i && "gutters", !l && "padding", p && "divider", t === "flex-start" && "alignItemsFlexStart", a && "secondaryAction"],
container: ["container"]
}, W, s);
}, nt = A("div", {
name: "MuiListItem",
slot: "Root",
overridesResolver: ot
})(q(({
theme: o
}) => ({
display: "flex",
justifyContent: "flex-start",
alignItems: "center",
position: "relative",
textDecoration: "none",
width: "100%",
boxSizing: "border-box",
textAlign: "left",
variants: [{
props: ({
ownerState: t
}) => !t.disablePadding,
style: {
paddingTop: 8,
paddingBottom: 8
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && t.dense,
style: {
paddingTop: 4,
paddingBottom: 4
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && !t.disableGutters,
style: {
paddingLeft: 16,
paddingRight: 16
}
}, {
props: ({
ownerState: t
}) => !t.disablePadding && !!t.secondaryAction,
style: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
paddingRight: 48
}
}, {
props: ({
ownerState: t
}) => !!t.secondaryAction,
style: {
[`& > .${X.root}`]: {
paddingRight: 48
}
}
}, {
props: {
alignItems: "flex-start"
},
style: {
alignItems: "flex-start"
}
}, {
props: ({
ownerState: t
}) => t.divider,
style: {
borderBottom: `1px solid ${(o.vars || o).palette.divider}`,
backgroundClip: "padding-box"
}
}, {
props: ({
ownerState: t
}) => t.button,
style: {
transition: o.transitions.create("background-color", {
duration: o.transitions.duration.shortest
}),
"&:hover": {
textDecoration: "none",
backgroundColor: (o.vars || o).palette.action.hover,
// Reset on touch devices, it doesn't add specificity
"@media (hover: none)": {
backgroundColor: "transparent"
}
}
}
}, {
props: ({
ownerState: t
}) => t.hasSecondaryAction,
style: {
// Add some space to avoid collision as `ListItemSecondaryAction`
// is absolutely positioned.
paddingRight: 48
}
}]
}))), it = A("li", {
name: "MuiListItem",
slot: "Container"
})({
position: "relative"
}), rt = /* @__PURE__ */ r.forwardRef(function(t, s) {
const n = U({
props: t,
name: "MuiListItem"
}), {
alignItems: i = "center",
children: l,
className: p,
component: a,
components: g = {},
componentsProps: k = {},
ContainerComponent: P = "li",
ContainerProps: {
className: E,
...D
} = {},
dense: R = !1,
disableGutters: I = !1,
disablePadding: V = !1,
divider: $ = !1,
secondaryAction: N,
slotProps: H = {},
slots: Y = {},
..._
} = n, T = r.useContext(h), v = r.useMemo(() => ({
dense: R || T.dense || !1,
alignItems: i,
disableGutters: I
}), [i, T.dense, R, I]), z = r.useRef(null), c = r.Children.toArray(l), G = c.length && F(c[c.length - 1], ["ListItemSecondaryAction"]), y = {
...n,
alignItems: i,
dense: v.dense,
disableGutters: I,
disablePadding: V,
divider: $,
hasSecondaryAction: G
}, M = st(y), j = J(z, s), b = Y.root || g.Root || nt, m = H.root || k.root || {}, u = {
className: C(M.root, m.className, p),
..._
};
let d = a || "li";
return G ? (d = !u.component && !a ? "div" : d, P === "li" && (d === "li" ? d = "div" : u.component === "li" && (u.component = "div")), /* @__PURE__ */ f(h.Provider, {
value: v,
children: /* @__PURE__ */ O(it, {
as: P,
className: C(M.container, E),
ref: j,
ownerState: y,
...D,
children: [/* @__PURE__ */ f(b, {
...m,
...!w(b) && {
as: d,
ownerState: {
...y,
...m.ownerState
}
},
...u,
children: c
}), c.pop()]
})
})) : /* @__PURE__ */ f(h.Provider, {
value: v,
children: /* @__PURE__ */ O(b, {
...m,
as: d,
ref: j,
...!w(b) && {
ownerState: {
...y,
...m.ownerState
}
},
...u,
children: [c, N && /* @__PURE__ */ f(S, {
children: N
})]
})
});
});
process.env.NODE_ENV !== "production" && (rt.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Defines the `align-items` style property.
* @default 'center'
*/
alignItems: e.oneOf(["center", "flex-start"]),
/**
* The content of the component if a `ListItemSecondaryAction` is used it must
* be the last child.
*/
children: Q(e.node, (o) => {
const t = r.Children.toArray(o.children);
let s = -1;
for (let n = t.length - 1; n >= 0; n -= 1) {
const i = t[n];
if (F(i, ["ListItemSecondaryAction"])) {
s = n;
break;
}
}
return s !== -1 && s !== t.length - 1 ? new Error("MUI: You used an element after ListItemSecondaryAction. For ListItem to detect that it has a secondary action you must pass it as the last child to ListItem.") : null;
}),
/**
* Override or extend the styles applied to the component.
*/
classes: e.object,
/**
* @ignore
*/
className: e.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: e.elementType,
/**
* 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({
Root: 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({
root: e.object
}),
/**
* The container component used when a `ListItemSecondaryAction` is the last child.
* @default 'li'
* @deprecated Use the `component` or `slots.root` 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.
*/
ContainerComponent: K,
/**
* Props applied to the container component if used.
* @default {}
* @deprecated Use the `slotProps.root` 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.
*/
ContainerProps: e.object,
/**
* If `true`, compact vertical padding designed for keyboard and mouse input is used.
* The prop defaults to the value inherited from the parent List component.
* @default false
*/
dense: e.bool,
/**
* If `true`, the left and right padding is removed.
* @default false
*/
disableGutters: e.bool,
/**
* If `true`, all padding is removed.
* @default false
*/
disablePadding: e.bool,
/**
* If `true`, a 1px light border is added to the bottom of the list item.
* @default false
*/
divider: e.bool,
/**
* The element to display at the end of ListItem.
*/
secondaryAction: e.node,
/**
* The extra props for the slot components.
* You can override the existing props or add new ones.
*
* @default {}
*/
slotProps: e.shape({
root: e.object
}),
/**
* The components used for each slot inside.
*
* @default {}
*/
slots: e.shape({
root: 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])
});
export {
rt as L,
X as a,
It as b,
W as g,
ht as l
};