mui-chips-input
Version:
A chips input designed for the React library MUI
346 lines (339 loc) • 8.48 kB
JavaScript
import { jsx as x } from "react/jsx-runtime";
import C, { createElement as xt } from "react";
import tt from "@mui/material/Chip";
import { styled as B } from "@mui/material/styles";
import gt from "@mui/icons-material/Close";
import yt from "@mui/material/ClickAwayListener";
import Et from "@mui/material/IconButton";
import Dt from "@mui/material/TextField";
const S = {
enter: "Enter",
backspace: "Backspace"
}, At = {
ime: 229
}, It = B(tt)(({ theme: e, size: n }) => `
max-width: 100%;
margin: 2px 4px;
height: ${n === "small" ? "26px" : "32px"};
&[aria-disabled="true"] > svg {
color: ${e.palette.action.disabled};
cursor: default;
}
&.MuiChipsInput-Chip-Editing {
background-color: ${e.palette.primary.light};
color: ${e.palette.primary.contrastText};
}
`), wt = {
ChipStyled: It
}, X = ({
className: e,
index: n,
onDelete: c,
disabled: l,
onEdit: h,
isEditing: o,
disableEdition: D,
...g
}) => {
const y = (s) => {
s.key === S.enter && c(n);
}, A = (s) => {
s?.preventDefault?.(), s?.stopPropagation?.(), c(n);
}, I = (s) => {
s.target.textContent === g.label && (l || h(n));
};
return /* @__PURE__ */ x(
wt.ChipStyled,
{
className: `MuiChipsInput-Chip ${o ? "MuiChipsInput-Chip-Editing" : ""} ${e || ""}`,
onKeyDown: y,
disabled: l,
onDoubleClick: D ? void 0 : I,
tabIndex: l ? -1 : 0,
"aria-disabled": l,
onDelete: A,
...g
}
);
};
function kt(e) {
return typeof e == "boolean";
}
function bt(e) {
return typeof e == "object" && !Array.isArray(e) && e !== null;
}
function Z(e, n) {
typeof n == "function" ? n(e) : n && bt(n) && "current" in n && (n.current = e);
}
const Tt = B("div")`
top: 50%;
transform: translateY(-50%);
right: 10px;
position: absolute;
`, $t = B(Dt)((e) => `
max-width: 100%;
.MuiInputBase-root {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
row-gap: 5px;
padding-top: ${e.size === "small" ? "5px" : "9px"};
padding-right: 30px;
padding-bottom: ${e.size === "small" ? "5px" : "9px"};
padding-left: 10px;
input {
min-width: 30px;
width: auto;
flex-grow: 1;
text-overflow: ellipsis;
padding: ${e.size === "small" ? "3.5px 4px" : "7.5px 4px"};
align-self: center;
}
}
`);
B(tt)(({ theme: e, size: n }) => `
max-width: 100%;
margin: 2px 4px;
height: ${n === "small" ? "26px" : "32px"};
&[aria-disabled="true"] > svg.MuiChip-deleteIcon {
color: ${e.palette.action.disabled};
cursor: default;
}
`);
const W = {
TextFieldStyled: $t,
EndAdornmentClose: Tt
}, St = C.forwardRef(
({
chips: e,
onAddChip: n,
onEditChip: c,
onDeleteChip: l,
onInputChange: h,
disabled: o,
clearInputOnBlur: D,
addOnBlur: g,
validate: y,
error: A,
helperText: I,
hideClearAll: s,
slotProps: T,
size: w,
disableDeleteOnBackspace: F,
disableEdition: M,
className: K,
renderChip: $,
addOnWhichKey: k,
onFocus: z,
onDeleteAllChips: P,
inputRef: R,
inputValue: i,
...p
}, b) => {
const [et, nt] = C.useState(""), [j, _] = C.useState(""), L = C.useRef(null), V = C.useRef(!1), rt = C.useRef(
typeof i == "string"
), [d, N] = C.useState(null), O = () => {
_("");
}, U = rt.current, m = U ? i : et, Y = (t) => {
h?.(t), U || nt(t);
}, lt = (t) => {
Y(e[t]), N(t), O();
}, E = () => {
N(null);
}, f = () => {
O(), Y("");
}, ot = (t) => {
Y(t.target.value);
}, G = (t, r) => (u) => {
if (typeof y == "function") {
const a = y(t);
if (a === !1) {
r?.preventDefault();
return;
}
if (!kt(a) && a.isError) {
r?.preventDefault(), _(a.textError);
return;
}
}
u();
}, H = (t, r, u) => {
G(
t,
u
)(() => {
c?.(t, r), E(), f();
});
}, q = (t, r) => {
G(
t,
r
)(() => {
n?.(m.trim()), f();
});
}, v = () => {
if (V.current) {
if (d !== null)
E(), f();
else if (g) {
if (m.length > 0) {
const t = m.trim();
t.length === 0 ? f() : d !== null ? H(t, d) : q(t);
}
} else D && f();
V.current = !1;
}
}, it = (t) => {
L.current = t, R && Z(t, R), b && Z(t, b);
}, st = (t, r) => r === At.ime ? !1 : k ? Array.isArray(k) ? k.some((u) => u === t) : k === t : t === S.enter, at = (t) => {
const r = st(t.key, t.keyCode), u = t.key === S.backspace, a = m.trim();
if (!r && t.code === "Tab") {
v();
return;
}
if (r && t.preventDefault(), m.length > 0 && r)
a.length === 0 ? f() : d !== null ? H(a, d, t) : q(a, t);
else if (u && m.length === 0 && e.length > 0 && !F) {
const Q = e.length - 1;
l?.(Q), d === Q && E();
}
}, ut = (t) => {
t.preventDefault(), z?.(t), V.current = !0;
}, ct = (t) => {
t.preventDefault(), !s && !o && (P?.(), f(), E());
}, pt = (t) => {
t === d ? (f(), E()) : lt(t), L.current?.focus();
}, dt = (t) => {
o || (l?.(t), d !== null && (E(), f()));
}, J = e.length > 0, { ...ft } = T || {}, { htmlInput: ht, input: mt, ...Ct } = ft || {};
return /* @__PURE__ */ x(yt, { onClickAway: v, children: /* @__PURE__ */ x(
W.TextFieldStyled,
{
value: m,
onChange: ot,
ref: b,
className: `MuiChipsInput-TextField ${K || ""}`,
size: w,
placeholder: "Type and press enter",
onFocus: ut,
slotProps: {
htmlInput: {
onKeyDown: at,
enterKeyHint: "done",
ref: it,
...ht
},
input: {
startAdornment: J ? e.map((t, r) => {
const u = `chip-${r}`, a = {
index: r,
onEdit: pt,
label: t,
title: t,
isEditing: r === d,
size: w,
disabled: o,
disableEdition: M,
onDelete: dt
};
return $ ? $(X, u, a) : /* @__PURE__ */ xt(X, { ...a, key: u });
}) : null,
endAdornment: s ? null : /* @__PURE__ */ x(
W.EndAdornmentClose,
{
style: {
visibility: J ? "visible" : "hidden"
},
children: /* @__PURE__ */ x(
Et,
{
"aria-label": "Clear",
title: "Clear",
disabled: o,
size: "small",
onClick: ct,
children: /* @__PURE__ */ x(gt, { fontSize: "small" })
}
)
}
),
...mt
},
...Ct
},
disabled: o,
error: !!j || A,
helperText: j || I,
...p
}
) });
}
);
function Bt(e, n) {
return [...e, n];
}
function Ft(e, n) {
return e.filter((c, l) => n !== l);
}
function Mt(e, n, c) {
return e.map((l, h) => n === h ? c : l);
}
const Kt = [], Nt = ({
value: e = Kt,
onChange: n,
onAddChip: c,
onInputChange: l,
onDeleteChip: h,
disabled: o,
validate: D,
clearInputOnBlur: g,
addOnBlur: y,
hideClearAll: A,
disableDeleteOnBackspace: I,
onEditChip: s,
renderChip: T,
disableEdition: w,
ref: F,
addOnWhichKey: M = S.enter,
inputValue: K,
...$
}) => /* @__PURE__ */ x(
St,
{
chips: e,
onAddChip: (i) => {
if (o)
return;
const p = Bt(e, i), b = p.length - 1;
c?.(i, b), n?.(p);
},
onInputChange: l,
disableDeleteOnBackspace: I,
onDeleteChip: (i) => {
if (o)
return;
const p = e[i];
n?.(Ft(e, i)), h?.(p, i);
},
onEditChip: (i, p) => {
o || w || (n?.(Mt(e, p, i)), s?.(i, p));
},
renderChip: T,
onDeleteAllChips: () => {
n?.([]);
},
clearInputOnBlur: g,
addOnBlur: y,
disabled: o,
disableEdition: w,
validate: D,
inputValue: K,
hideClearAll: A,
addOnWhichKey: M,
...$,
ref: F
}
);
export {
Nt as MuiChipsInput
};