@cgi-learning-hub/ui
Version:
@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features
573 lines (572 loc) • 18.2 kB
JavaScript
import * as u from "react";
import { P as o } from "./index-Sy88PpwE.js";
import { F as ta, G as la, H as k, K as r, n as d } from "./identifier-PWESmBq6.js";
import { c as ra } from "./createSvgIcon-B1E6Wo8z.js";
import { jsx as w, jsxs as na } from "react/jsx-runtime";
import { m as ia } from "./memoTheme-DAFDflPY.js";
import { c as I } from "./createSimplePaletteValueFilter-B7--0ryQ.js";
import { u as j } from "./useSlot-BzdKwDQ5.js";
import { u as ca, s as M, c as sa } from "./DefaultPropsProvider-DqazQPtr.js";
import { u as pa } from "./useForkRef-u29GSuCu.js";
import { B as F } from "./ButtonBase-6TF6t2SP.js";
import { u as da } from "./unsupportedProp-BuVD30Gh.js";
const ua = ra(/* @__PURE__ */ w("path", {
d: "M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"
}), "Cancel");
function fa(a) {
return la("MuiChip", a);
}
const t = ta("MuiChip", ["root", "sizeSmall", "sizeMedium", "colorDefault", "colorError", "colorInfo", "colorPrimary", "colorSecondary", "colorSuccess", "colorWarning", "disabled", "clickable", "clickableColorPrimary", "clickableColorSecondary", "deletable", "deletableColorPrimary", "deletableColorSecondary", "outlined", "filled", "outlinedPrimary", "outlinedSecondary", "filledPrimary", "filledSecondary", "avatar", "avatarSmall", "avatarMedium", "avatarColorPrimary", "avatarColorSecondary", "icon", "iconSmall", "iconMedium", "iconColorPrimary", "iconColorSecondary", "label", "labelSmall", "labelMedium", "deleteIcon", "deleteIconSmall", "deleteIconMedium", "deleteIconColorPrimary", "deleteIconColorSecondary", "deleteIconOutlinedColorPrimary", "deleteIconOutlinedColorSecondary", "deleteIconFilledColorPrimary", "deleteIconFilledColorSecondary", "focusVisible"]), ba = (a) => {
const {
classes: l,
disabled: e,
size: i,
color: c,
iconColor: y,
onDelete: f,
clickable: s,
variant: p
} = a, $ = {
root: ["root", p, e && "disabled", `size${r(i)}`, `color${r(c)}`, s && "clickable", s && `clickableColor${r(c)}`, f && "deletable", f && `deletableColor${r(c)}`, `${p}${r(c)}`],
label: ["label", `label${r(i)}`],
avatar: ["avatar", `avatar${r(i)}`, `avatarColor${r(c)}`],
icon: ["icon", `icon${r(i)}`, `iconColor${r(y)}`],
deleteIcon: ["deleteIcon", `deleteIcon${r(i)}`, `deleteIconColor${r(c)}`, `deleteIcon${r(p)}Color${r(c)}`]
};
return sa($, fa, l);
}, va = M("div", {
name: "MuiChip",
slot: "Root",
overridesResolver: (a, l) => {
const {
ownerState: e
} = a, {
color: i,
iconColor: c,
clickable: y,
onDelete: f,
size: s,
variant: p
} = e;
return [{
[`& .${t.avatar}`]: l.avatar
}, {
[`& .${t.avatar}`]: l[`avatar${r(s)}`]
}, {
[`& .${t.avatar}`]: l[`avatarColor${r(i)}`]
}, {
[`& .${t.icon}`]: l.icon
}, {
[`& .${t.icon}`]: l[`icon${r(s)}`]
}, {
[`& .${t.icon}`]: l[`iconColor${r(c)}`]
}, {
[`& .${t.deleteIcon}`]: l.deleteIcon
}, {
[`& .${t.deleteIcon}`]: l[`deleteIcon${r(s)}`]
}, {
[`& .${t.deleteIcon}`]: l[`deleteIconColor${r(i)}`]
}, {
[`& .${t.deleteIcon}`]: l[`deleteIcon${r(p)}Color${r(i)}`]
}, l.root, l[`size${r(s)}`], l[`color${r(i)}`], y && l.clickable, y && i !== "default" && l[`clickableColor${r(i)})`], f && l.deletable, f && i !== "default" && l[`deletableColor${r(i)}`], l[p], l[`${p}${r(i)}`]];
}
})(ia(({
theme: a
}) => {
const l = a.palette.mode === "light" ? a.palette.grey[700] : a.palette.grey[300];
return {
maxWidth: "100%",
fontFamily: a.typography.fontFamily,
fontSize: a.typography.pxToRem(13),
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
height: 32,
color: (a.vars || a).palette.text.primary,
backgroundColor: (a.vars || a).palette.action.selected,
borderRadius: 32 / 2,
whiteSpace: "nowrap",
transition: a.transitions.create(["background-color", "box-shadow"]),
// reset cursor explicitly in case ButtonBase is used
cursor: "unset",
// We disable the focus ring for mouse, touch and keyboard users.
outline: 0,
textDecoration: "none",
border: 0,
// Remove `button` border
padding: 0,
// Remove `button` padding
verticalAlign: "middle",
boxSizing: "border-box",
[`&.${t.disabled}`]: {
opacity: (a.vars || a).palette.action.disabledOpacity,
pointerEvents: "none"
},
[`& .${t.avatar}`]: {
marginLeft: 5,
marginRight: -6,
width: 24,
height: 24,
color: a.vars ? a.vars.palette.Chip.defaultAvatarColor : l,
fontSize: a.typography.pxToRem(12)
},
[`& .${t.avatarColorPrimary}`]: {
color: (a.vars || a).palette.primary.contrastText,
backgroundColor: (a.vars || a).palette.primary.dark
},
[`& .${t.avatarColorSecondary}`]: {
color: (a.vars || a).palette.secondary.contrastText,
backgroundColor: (a.vars || a).palette.secondary.dark
},
[`& .${t.avatarSmall}`]: {
marginLeft: 4,
marginRight: -4,
width: 18,
height: 18,
fontSize: a.typography.pxToRem(10)
},
[`& .${t.icon}`]: {
marginLeft: 5,
marginRight: -6
},
[`& .${t.deleteIcon}`]: {
WebkitTapHighlightColor: "transparent",
color: a.vars ? `rgba(${a.vars.palette.text.primaryChannel} / 0.26)` : d(a.palette.text.primary, 0.26),
fontSize: 22,
cursor: "pointer",
margin: "0 5px 0 -6px",
"&:hover": {
color: a.vars ? `rgba(${a.vars.palette.text.primaryChannel} / 0.4)` : d(a.palette.text.primary, 0.4)
}
},
variants: [{
props: {
size: "small"
},
style: {
height: 24,
[`& .${t.icon}`]: {
fontSize: 18,
marginLeft: 4,
marginRight: -4
},
[`& .${t.deleteIcon}`]: {
fontSize: 16,
marginRight: 4,
marginLeft: -4
}
}
}, ...Object.entries(a.palette).filter(I(["contrastText"])).map(([e]) => ({
props: {
color: e
},
style: {
backgroundColor: (a.vars || a).palette[e].main,
color: (a.vars || a).palette[e].contrastText,
[`& .${t.deleteIcon}`]: {
color: a.vars ? `rgba(${a.vars.palette[e].contrastTextChannel} / 0.7)` : d(a.palette[e].contrastText, 0.7),
"&:hover, &:active": {
color: (a.vars || a).palette[e].contrastText
}
}
}
})), {
props: (e) => e.iconColor === e.color,
style: {
[`& .${t.icon}`]: {
color: a.vars ? a.vars.palette.Chip.defaultIconColor : l
}
}
}, {
props: (e) => e.iconColor === e.color && e.color !== "default",
style: {
[`& .${t.icon}`]: {
color: "inherit"
}
}
}, {
props: {
onDelete: !0
},
style: {
[`&.${t.focusVisible}`]: {
backgroundColor: a.vars ? `rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))` : d(a.palette.action.selected, a.palette.action.selectedOpacity + a.palette.action.focusOpacity)
}
}
}, ...Object.entries(a.palette).filter(I(["dark"])).map(([e]) => ({
props: {
color: e,
onDelete: !0
},
style: {
[`&.${t.focusVisible}`]: {
background: (a.vars || a).palette[e].dark
}
}
})), {
props: {
clickable: !0
},
style: {
userSelect: "none",
WebkitTapHighlightColor: "transparent",
cursor: "pointer",
"&:hover": {
backgroundColor: a.vars ? `rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.hoverOpacity}))` : d(a.palette.action.selected, a.palette.action.selectedOpacity + a.palette.action.hoverOpacity)
},
[`&.${t.focusVisible}`]: {
backgroundColor: a.vars ? `rgba(${a.vars.palette.action.selectedChannel} / calc(${a.vars.palette.action.selectedOpacity} + ${a.vars.palette.action.focusOpacity}))` : d(a.palette.action.selected, a.palette.action.selectedOpacity + a.palette.action.focusOpacity)
},
"&:active": {
boxShadow: (a.vars || a).shadows[1]
}
}
}, ...Object.entries(a.palette).filter(I(["dark"])).map(([e]) => ({
props: {
color: e,
clickable: !0
},
style: {
[`&:hover, &.${t.focusVisible}`]: {
backgroundColor: (a.vars || a).palette[e].dark
}
}
})), {
props: {
variant: "outlined"
},
style: {
backgroundColor: "transparent",
border: a.vars ? `1px solid ${a.vars.palette.Chip.defaultBorder}` : `1px solid ${a.palette.mode === "light" ? a.palette.grey[400] : a.palette.grey[700]}`,
[`&.${t.clickable}:hover`]: {
backgroundColor: (a.vars || a).palette.action.hover
},
[`&.${t.focusVisible}`]: {
backgroundColor: (a.vars || a).palette.action.focus
},
[`& .${t.avatar}`]: {
marginLeft: 4
},
[`& .${t.avatarSmall}`]: {
marginLeft: 2
},
[`& .${t.icon}`]: {
marginLeft: 4
},
[`& .${t.iconSmall}`]: {
marginLeft: 2
},
[`& .${t.deleteIcon}`]: {
marginRight: 5
},
[`& .${t.deleteIconSmall}`]: {
marginRight: 3
}
}
}, ...Object.entries(a.palette).filter(I()).map(([e]) => ({
props: {
variant: "outlined",
color: e
},
style: {
color: (a.vars || a).palette[e].main,
border: `1px solid ${a.vars ? `rgba(${a.vars.palette[e].mainChannel} / 0.7)` : d(a.palette[e].main, 0.7)}`,
[`&.${t.clickable}:hover`]: {
backgroundColor: a.vars ? `rgba(${a.vars.palette[e].mainChannel} / ${a.vars.palette.action.hoverOpacity})` : d(a.palette[e].main, a.palette.action.hoverOpacity)
},
[`&.${t.focusVisible}`]: {
backgroundColor: a.vars ? `rgba(${a.vars.palette[e].mainChannel} / ${a.vars.palette.action.focusOpacity})` : d(a.palette[e].main, a.palette.action.focusOpacity)
},
[`& .${t.deleteIcon}`]: {
color: a.vars ? `rgba(${a.vars.palette[e].mainChannel} / 0.7)` : d(a.palette[e].main, 0.7),
"&:hover, &:active": {
color: (a.vars || a).palette[e].main
}
}
}
}))]
};
})), ga = M("span", {
name: "MuiChip",
slot: "Label",
overridesResolver: (a, l) => {
const {
ownerState: e
} = a, {
size: i
} = e;
return [l.label, l[`label${r(i)}`]];
}
})({
overflow: "hidden",
textOverflow: "ellipsis",
paddingLeft: 12,
paddingRight: 12,
whiteSpace: "nowrap",
variants: [{
props: {
variant: "outlined"
},
style: {
paddingLeft: 11,
paddingRight: 11
}
}, {
props: {
size: "small"
},
style: {
paddingLeft: 8,
paddingRight: 8
}
}, {
props: {
size: "small",
variant: "outlined"
},
style: {
paddingLeft: 7,
paddingRight: 7
}
}]
});
function K(a) {
return a.key === "Backspace" || a.key === "Delete";
}
const Ca = /* @__PURE__ */ u.forwardRef(function(l, e) {
const i = ca({
props: l,
name: "MuiChip"
}), {
avatar: c,
className: y,
clickable: f,
color: s = "default",
component: p,
deleteIcon: $,
disabled: S = !1,
icon: m,
label: U,
onClick: D,
onDelete: b,
onKeyDown: z,
onKeyUp: L,
size: W = "medium",
variant: B = "filled",
tabIndex: H,
skipFocusWhenDisabled: A = !1,
// TODO v6: Rename to `focusableWhenDisabled`.
slots: _ = {},
slotProps: G = {},
...q
} = i, J = u.useRef(null), Q = pa(J, e), N = (n) => {
n.stopPropagation(), b && b(n);
}, X = (n) => {
n.currentTarget === n.target && K(n) && n.preventDefault(), z && z(n);
}, Y = (n) => {
n.currentTarget === n.target && b && K(n) && b(n), L && L(n);
}, x = f !== !1 && D ? !0 : f, O = x || b ? F : p || "div", P = {
...i,
component: O,
disabled: S,
size: W,
color: s,
iconColor: /* @__PURE__ */ u.isValidElement(m) && m.props.color || s,
onDelete: !!b,
clickable: x,
variant: B
}, C = ba(P), Z = O === F ? {
component: p || "div",
focusVisibleClassName: C.focusVisible,
...b && {
disableRipple: !0
}
} : {};
let V = null;
b && (V = $ && /* @__PURE__ */ u.isValidElement($) ? /* @__PURE__ */ u.cloneElement($, {
className: k($.props.className, C.deleteIcon),
onClick: N
}) : /* @__PURE__ */ w(ua, {
className: C.deleteIcon,
onClick: N
}));
let T = null;
c && /* @__PURE__ */ u.isValidElement(c) && (T = /* @__PURE__ */ u.cloneElement(c, {
className: k(C.avatar, c.props.className)
}));
let R = null;
m && /* @__PURE__ */ u.isValidElement(m) && (R = /* @__PURE__ */ u.cloneElement(m, {
className: k(C.icon, m.props.className)
})), process.env.NODE_ENV !== "production" && T && R && console.error("MUI: The Chip component can not handle the avatar and the icon prop at the same time. Pick one.");
const E = {
slots: _,
slotProps: G
}, [h, aa] = j("root", {
elementType: va,
externalForwardedProps: {
...E,
...q
},
ownerState: P,
// The `component` prop is preserved because `Chip` relies on it for internal logic. If `shouldForwardComponentProp` were `false`, `useSlot` would remove the `component` prop, potentially breaking the component's behavior.
shouldForwardComponentProp: !0,
ref: Q,
className: k(C.root, y),
additionalProps: {
disabled: x && S ? !0 : void 0,
tabIndex: A && S ? -1 : H,
...Z
},
getSlotProps: (n) => ({
...n,
onClick: (v) => {
var g;
(g = n.onClick) == null || g.call(n, v), D(v);
},
onKeyDown: (v) => {
var g;
(g = n.onKeyDown) == null || g.call(n, v), X(v);
},
onKeyUp: (v) => {
var g;
(g = n.onKeyUp) == null || g.call(n, v), Y(v);
}
})
}), [oa, ea] = j("label", {
elementType: ga,
externalForwardedProps: E,
ownerState: P,
className: C.label
});
return /* @__PURE__ */ na(h, {
as: O,
...aa,
children: [T || R, /* @__PURE__ */ w(oa, {
...ea,
children: U
}), V]
});
});
process.env.NODE_ENV !== "production" && (Ca.propTypes = {
// ┌────────────────────────────── Warning ──────────────────────────────┐
// │ These PropTypes are generated from the TypeScript type definitions. │
// │ To update them, edit the d.ts file and run `pnpm proptypes`. │
// └─────────────────────────────────────────────────────────────────────┘
/**
* The Avatar element to display.
*/
avatar: o.element,
/**
* This prop isn't supported.
* Use the `component` prop if you need to change the children structure.
*/
children: da,
/**
* Override or extend the styles applied to the component.
*/
classes: o.object,
/**
* @ignore
*/
className: o.string,
/**
* If `true`, the chip will appear clickable, and will raise when pressed,
* even if the onClick prop is not defined.
* If `false`, the chip will not appear clickable, even if onClick prop is defined.
* This can be used, for example,
* along with the component prop to indicate an anchor Chip is clickable.
* Note: this controls the UI and does not affect the onClick event.
*/
clickable: o.bool,
/**
* The color of the component.
* It supports both default and custom theme colors, which can be added as shown in the
* [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
* @default 'default'
*/
color: o.oneOfType([o.oneOf(["default", "primary", "secondary", "error", "info", "success", "warning"]), o.string]),
/**
* The component used for the root node.
* Either a string to use a HTML element or a component.
*/
component: o.elementType,
/**
* Override the default delete icon element. Shown only if `onDelete` is set.
*/
deleteIcon: o.element,
/**
* If `true`, the component is disabled.
* @default false
*/
disabled: o.bool,
/**
* Icon element.
*/
icon: o.element,
/**
* The content of the component.
*/
label: o.node,
/**
* @ignore
*/
onClick: o.func,
/**
* Callback fired when the delete icon is clicked.
* If set, the delete icon will be shown.
*/
onDelete: o.func,
/**
* @ignore
*/
onKeyDown: o.func,
/**
* @ignore
*/
onKeyUp: o.func,
/**
* The size of the component.
* @default 'medium'
*/
size: o.oneOfType([o.oneOf(["medium", "small"]), o.string]),
/**
* If `true`, allows the disabled chip to escape focus.
* If `false`, allows the disabled chip to receive focus.
* @default false
*/
skipFocusWhenDisabled: o.bool,
/**
* The props used for each slot inside.
* @default {}
*/
slotProps: o.shape({
label: o.oneOfType([o.func, o.object]),
root: o.oneOfType([o.func, o.object])
}),
/**
* The components used for each slot inside.
* @default {}
*/
slots: o.shape({
label: o.elementType,
root: o.elementType
}),
/**
* 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]),
/**
* @ignore
*/
tabIndex: o.number,
/**
* The variant to use.
* @default 'filled'
*/
variant: o.oneOfType([o.oneOf(["filled", "outlined"]), o.string])
});
export {
Ca as C,
t as c,
fa as g
};