@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
298 lines (297 loc) • 7.83 kB
JavaScript
import * as A from "react";
import { P as r } from "./index-B9vkf41S.js";
import { H as D } from "./generateUtilityClasses-B_xKAflz.js";
import { m } from "./memoTheme-C-PaH-Cy.js";
import { g as T } from "./dividerClasses-BEzQ_reA.js";
import { jsx as v } from "react/jsx-runtime";
import { u as R, s as b, c as S } from "./DefaultPropsProvider-BrmlvPWg.js";
const C = (e) => {
const {
absolute: t,
children: i,
classes: s,
flexItem: p,
light: n,
orientation: o,
textAlign: a,
variant: l
} = e;
return S({
root: ["root", t && "absolute", l, n && "light", o === "vertical" && "vertical", p && "flexItem", i && "withChildren", i && o === "vertical" && "withChildrenVertical", a === "right" && o !== "vertical" && "textAlignRight", a === "left" && o !== "vertical" && "textAlignLeft"],
wrapper: ["wrapper", o === "vertical" && "wrapperVertical"]
}, T, s);
}, L = b("div", {
name: "MuiDivider",
slot: "Root",
overridesResolver: (e, t) => {
const {
ownerState: i
} = e;
return [t.root, i.absolute && t.absolute, t[i.variant], i.light && t.light, i.orientation === "vertical" && t.vertical, i.flexItem && t.flexItem, i.children && t.withChildren, i.children && i.orientation === "vertical" && t.withChildrenVertical, i.textAlign === "right" && i.orientation !== "vertical" && t.textAlignRight, i.textAlign === "left" && i.orientation !== "vertical" && t.textAlignLeft];
}
})(m(({
theme: e
}) => ({
margin: 0,
// Reset browser default style.
flexShrink: 0,
borderWidth: 0,
borderStyle: "solid",
borderColor: (e.vars || e).palette.divider,
borderBottomWidth: "thin",
variants: [{
props: {
absolute: !0
},
style: {
position: "absolute",
bottom: 0,
left: 0,
width: "100%"
}
}, {
props: {
light: !0
},
style: {
borderColor: e.alpha((e.vars || e).palette.divider, 0.08)
}
}, {
props: {
variant: "inset"
},
style: {
marginLeft: 72
}
}, {
props: {
variant: "middle",
orientation: "horizontal"
},
style: {
marginLeft: e.spacing(2),
marginRight: e.spacing(2)
}
}, {
props: {
variant: "middle",
orientation: "vertical"
},
style: {
marginTop: e.spacing(1),
marginBottom: e.spacing(1)
}
}, {
props: {
orientation: "vertical"
},
style: {
height: "100%",
borderBottomWidth: 0,
borderRightWidth: "thin"
}
}, {
props: {
flexItem: !0
},
style: {
alignSelf: "stretch",
height: "auto"
}
}, {
props: ({
ownerState: t
}) => !!t.children,
style: {
display: "flex",
textAlign: "center",
border: 0,
borderTopStyle: "solid",
borderLeftStyle: "solid",
"&::before, &::after": {
content: '""',
alignSelf: "center"
}
}
}, {
props: ({
ownerState: t
}) => t.children && t.orientation !== "vertical",
style: {
"&::before, &::after": {
width: "100%",
borderTop: `thin solid ${(e.vars || e).palette.divider}`,
borderTopStyle: "inherit"
}
}
}, {
props: ({
ownerState: t
}) => t.orientation === "vertical" && t.children,
style: {
flexDirection: "column",
"&::before, &::after": {
height: "100%",
borderLeft: `thin solid ${(e.vars || e).palette.divider}`,
borderLeftStyle: "inherit"
}
}
}, {
props: ({
ownerState: t
}) => t.textAlign === "right" && t.orientation !== "vertical",
style: {
"&::before": {
width: "90%"
},
"&::after": {
width: "10%"
}
}
}, {
props: ({
ownerState: t
}) => t.textAlign === "left" && t.orientation !== "vertical",
style: {
"&::before": {
width: "10%"
},
"&::after": {
width: "90%"
}
}
}]
}))), O = b("span", {
name: "MuiDivider",
slot: "Wrapper",
overridesResolver: (e, t) => {
const {
ownerState: i
} = e;
return [t.wrapper, i.orientation === "vertical" && t.wrapperVertical];
}
})(m(({
theme: e
}) => ({
display: "inline-block",
paddingLeft: `calc(${e.spacing(1)} * 1.2)`,
paddingRight: `calc(${e.spacing(1)} * 1.2)`,
whiteSpace: "nowrap",
variants: [{
props: {
orientation: "vertical"
},
style: {
paddingTop: `calc(${e.spacing(1)} * 1.2)`,
paddingBottom: `calc(${e.spacing(1)} * 1.2)`
}
}]
}))), f = /* @__PURE__ */ A.forwardRef(function(t, i) {
const s = R({
props: t,
name: "MuiDivider"
}), {
absolute: p = !1,
children: n,
className: o,
orientation: a = "horizontal",
component: l = n || a === "vertical" ? "div" : "hr",
flexItem: g = !1,
light: u = !1,
role: c = l !== "hr" ? "separator" : void 0,
textAlign: x = "center",
variant: w = "fullWidth",
...y
} = s, d = {
...s,
absolute: p,
component: l,
flexItem: g,
light: u,
orientation: a,
role: c,
textAlign: x,
variant: w
}, h = C(d);
return /* @__PURE__ */ v(L, {
as: l,
className: D(h.root, o),
role: c,
ref: i,
ownerState: d,
"aria-orientation": c === "separator" && (l !== "hr" || a === "vertical") ? a : void 0,
...y,
children: n ? /* @__PURE__ */ v(O, {
className: h.wrapper,
ownerState: d,
children: n
}) : null
});
});
f && (f.muiSkipListHighlight = !0);
process.env.NODE_ENV !== "production" && (f.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* Absolutely position the element.
* @default false
*/
absolute: r.bool,
/**
* The content of the component.
*/
children: r.node,
/**
* Override or extend the styles applied to the component.
*/
classes: r.object,
/**
* @ignore
*/
className: r.string,
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: r.elementType,
/**
* If `true`, a vertical divider will have the correct height when used in flex container.
* (By default, a vertical divider will have a calculated height of `0px` if it is the child of a flex container.)
* @default false
*/
flexItem: r.bool,
/**
* If `true`, the divider will have a lighter color.
* @default false
* @deprecated Use <Divider sx={{ opacity: 0.6 }} /> (or any opacity or color) instead. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
*/
light: r.bool,
/**
* The component orientation.
* @default 'horizontal'
*/
orientation: r.oneOf(["horizontal", "vertical"]),
/**
* @ignore
*/
role: r.string,
/**
* The system prop that allows defining system overrides as well as additional CSS styles.
*/
sx: r.oneOfType([r.arrayOf(r.oneOfType([r.func, r.object, r.bool])), r.func, r.object]),
/**
* The text alignment.
* @default 'center'
*/
textAlign: r.oneOf(["center", "left", "right"]),
/**
* The variant to use.
* @default 'fullWidth'
*/
variant: r.oneOfType([r.oneOf(["fullWidth", "inset", "middle"]), r.string])
});
export {
f as D
};