react-tag-maker
Version:
A customizable tag input component for React and Nextjs
477 lines (472 loc) • 14.3 kB
JavaScript
import se, { useRef as oe, useState as N, useEffect as W, useCallback as K } from "react";
var M = { exports: {} }, P = {};
/**
* @license React
* react-jsx-runtime.production.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var re;
function ie() {
if (re) return P;
re = 1;
var s = Symbol.for("react.transitional.element"), p = Symbol.for("react.fragment");
function t(f, a, c) {
var b = null;
if (c !== void 0 && (b = "" + c), a.key !== void 0 && (b = "" + a.key), "key" in a) {
c = {};
for (var g in a)
g !== "key" && (c[g] = a[g]);
} else c = a;
return a = c.ref, {
$$typeof: s,
type: f,
key: b,
ref: a !== void 0 ? a : null,
props: c
};
}
return P.Fragment = p, P.jsx = t, P.jsxs = t, P;
}
var S = {};
/**
* @license React
* react-jsx-runtime.development.js
*
* Copyright (c) Meta Platforms, Inc. and affiliates.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
var te;
function le() {
return te || (te = 1, process.env.NODE_ENV !== "production" && function() {
function s(e) {
if (e == null) return null;
if (typeof e == "function")
return e.$$typeof === G ? null : e.displayName || e.name || null;
if (typeof e == "string") return e;
switch (e) {
case w:
return "Fragment";
case j:
return "Profiler";
case z:
return "StrictMode";
case D:
return "Suspense";
case q:
return "SuspenseList";
case J:
return "Activity";
}
if (typeof e == "object")
switch (typeof e.tag == "number" && console.error(
"Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
), e.$$typeof) {
case $:
return "Portal";
case A:
return (e.displayName || "Context") + ".Provider";
case _:
return (e._context.displayName || "Context") + ".Consumer";
case U:
var r = e.render;
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
case I:
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
case O:
r = e._payload, e = e._init;
try {
return s(e(r));
} catch {
}
}
return null;
}
function p(e) {
return "" + e;
}
function t(e) {
try {
p(e);
var r = !1;
} catch {
r = !0;
}
if (r) {
r = console;
var o = r.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
return o.call(
r,
"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
i
), p(e);
}
}
function f(e) {
if (e === w) return "<>";
if (typeof e == "object" && e !== null && e.$$typeof === O)
return "<...>";
try {
var r = s(e);
return r ? "<" + r + ">" : "<...>";
} catch {
return "<...>";
}
}
function a() {
var e = h.A;
return e === null ? null : e.getOwner();
}
function c() {
return Error("react-stack-top-frame");
}
function b(e) {
if (L.call(e, "key")) {
var r = Object.getOwnPropertyDescriptor(e, "key").get;
if (r && r.isReactWarning) return !1;
}
return e.key !== void 0;
}
function g(e, r) {
function o() {
d || (d = !0, console.error(
"%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
r
));
}
o.isReactWarning = !0, Object.defineProperty(e, "key", {
get: o,
configurable: !0
});
}
function E() {
var e = s(this.type);
return x[e] || (x[e] = !0, console.error(
"Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
)), e = this.props.ref, e !== void 0 ? e : null;
}
function C(e, r, o, i, R, m, B, X) {
return o = m.ref, e = {
$$typeof: Y,
type: e,
key: r,
props: m,
_owner: R
}, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
enumerable: !1,
get: E
}) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
configurable: !1,
enumerable: !1,
writable: !0,
value: 0
}), Object.defineProperty(e, "_debugInfo", {
configurable: !1,
enumerable: !1,
writable: !0,
value: null
}), Object.defineProperty(e, "_debugStack", {
configurable: !1,
enumerable: !1,
writable: !0,
value: B
}), Object.defineProperty(e, "_debugTask", {
configurable: !1,
enumerable: !1,
writable: !0,
value: X
}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
}
function y(e, r, o, i, R, m, B, X) {
var l = r.children;
if (l !== void 0)
if (i)
if (V(l)) {
for (i = 0; i < l.length; i++)
F(l[i]);
Object.freeze && Object.freeze(l);
} else
console.error(
"React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
);
else F(l);
if (L.call(r, "key")) {
l = s(e);
var k = Object.keys(r).filter(function(ae) {
return ae !== "key";
});
i = 0 < k.length ? "{key: someKey, " + k.join(": ..., ") + ": ...}" : "{key: someKey}", ee[l + i] || (k = 0 < k.length ? "{" + k.join(": ..., ") + ": ...}" : "{}", console.error(
`A props object containing a "key" prop is being spread into JSX:
let props = %s;
<%s {...props} />
React keys must be passed directly to JSX without using spread:
let props = %s;
<%s key={someKey} {...props} />`,
i,
l,
k,
l
), ee[l + i] = !0);
}
if (l = null, o !== void 0 && (t(o), l = "" + o), b(r) && (t(r.key), l = "" + r.key), "key" in r) {
o = {};
for (var H in r)
H !== "key" && (o[H] = r[H]);
} else o = r;
return l && g(
o,
typeof e == "function" ? e.displayName || e.name || "Unknown" : e
), C(
e,
l,
m,
R,
a(),
o,
B,
X
);
}
function F(e) {
typeof e == "object" && e !== null && e.$$typeof === Y && e._store && (e._store.validated = 1);
}
var T = se, Y = Symbol.for("react.transitional.element"), $ = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), z = Symbol.for("react.strict_mode"), j = Symbol.for("react.profiler"), _ = Symbol.for("react.consumer"), A = Symbol.for("react.context"), U = Symbol.for("react.forward_ref"), D = Symbol.for("react.suspense"), q = Symbol.for("react.suspense_list"), I = Symbol.for("react.memo"), O = Symbol.for("react.lazy"), J = Symbol.for("react.activity"), G = Symbol.for("react.client.reference"), h = T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, L = Object.prototype.hasOwnProperty, V = Array.isArray, n = console.createTask ? console.createTask : function() {
return null;
};
T = {
react_stack_bottom_frame: function(e) {
return e();
}
};
var d, x = {}, u = T.react_stack_bottom_frame.bind(
T,
c
)(), Q = n(f(c)), ee = {};
S.Fragment = w, S.jsx = function(e, r, o, i, R) {
var m = 1e4 > h.recentlyCreatedOwnerStacks++;
return y(
e,
r,
o,
!1,
i,
R,
m ? Error("react-stack-top-frame") : u,
m ? n(f(e)) : Q
);
}, S.jsxs = function(e, r, o, i, R) {
var m = 1e4 > h.recentlyCreatedOwnerStacks++;
return y(
e,
r,
o,
!0,
i,
R,
m ? Error("react-stack-top-frame") : u,
m ? n(f(e)) : Q
);
};
}()), S;
}
var ne;
function ce() {
return ne || (ne = 1, process.env.NODE_ENV === "production" ? M.exports = ie() : M.exports = le()), M.exports;
}
var v = ce();
function ue(s, p) {
const t = oe(!0);
W(() => {
t.current && (s(), t.current = !1);
}, p);
}
function fe({ text: s, remove: p, disabled: t, className: f }) {
const [a, c] = N(!1), b = K((E) => {
E.stopPropagation(), c(!0), setTimeout(() => {
p(s);
}, 150);
}, [p, s]), g = K((...E) => a ? E.filter(Boolean).join(" ") + " disappearing" : E.filter(Boolean).join(" "), [a]);
return /* @__PURE__ */ v.jsxs("span", { className: g("gloomy-tag--tag", f), children: [
/* @__PURE__ */ v.jsx("span", { children: s }),
!t && /* @__PURE__ */ v.jsx("button", { type: "button", onClick: b, "aria-label": `remove ${s}`, children: "✕" })
] });
}
let Z;
function pe({
name: s,
placeHolder: p,
state: t,
setState: f,
onChange: a,
onBlur: c,
separators: b = [],
disableBackspaceRemove: g = !1,
onExisting: E,
onRemoved: C,
disabled: y = !1,
isEditOnRemove: F = !1,
beforeAddValidate: T,
onKeyUp: Y,
classNames: $,
style: w,
throttleTime: z
}) {
const j = oe(null), [_, A] = N([]);
ue(() => {
f && f(t);
}, [t]), W(() => {
const n = typeof t == "object" ? t.map((d) => ({
tag: d,
focus: !1
})) : [];
A(n), a && a(t);
}, [t, a]);
const [U, D] = N(0), q = ["Enter", " ", ","], [I, O] = N(!1);
W(() => {
_.find((n) => n && n.focus) ? O(!0) : O(!1);
}, [_]);
const J = (n) => {
if (n.nativeEvent.isComposing || Z) return;
setTimeout(() => Z = void 0, Z);
const d = n.currentTarget.value.replace(/\s/gi, ""), x = n.key;
if (d && (b.includes(x) || q.includes(x))) {
if (n.preventDefault(), T && !T(d, t))
return;
if (!U) D(setTimeout(() => {
D(0);
}, z ?? 10));
else return console.warn("react-tag-maker throttling!");
t.includes(d) ? E && E(d) : (f([...t, d]), n.currentTarget.value = "");
}
if (!d && !g && t.length && x === "Backspace")
if (n.preventDefault(), F)
n.currentTarget.value = `${t.slice(-1)} `;
else if (I)
f([...t.slice(0, -1)]);
else if (!I && t.length > 0) {
const u = [..._];
u[u.length - 1] && (u[u.length - 1].focus = !0, A(u));
} else
console.log();
else {
const u = [..._];
u[u.length - 1] && (u[u.length - 1].focus = !1, A(u));
}
}, G = (n) => {
f(t.filter((d) => d !== n)), C && C(n);
}, [h, L] = N(null);
W(() => {
!h && typeof document == "object" && L(`
.gloomy-tag--container {
box-sizing: border-box;
transition: all 0.2s ease;
align-items: center;
background: #fff;
border: 1px solid #ccc;
border-radius: 5px;
display: flex;
flex-wrap: wrap;
gap: 8px;
line-height: 1.4;
padding: 8px;
width: 375px;
cursor: text;
@media(max-width: 600px) {
width: 100%;
}
&:focus-within {
border-color: #1d77fe;
box-shadow: #1d77fe 0 0 0 1px;
}
&,
* {
box-sizing: border-box;
transition: all 0.2s ease;
}
.gloomy-tag--input {
border: 0;
outline: 0;
font-size: inherit;
line-height: inherit;
width: 50%;
background: #fff;
color: #000;
}
.gloomy-tag--tag {
align-items: center;
background: #dbe3eb;
border: 1px solid #b6b5b5;
border-radius: 10px;
display: inline-flex;
justify-content: center;
padding: 2.5px 4px;
opacity: 1;
color: #000;
&:has(button:hover) {
background: #ffe2e2;
}
&.gloomy-tag--focus {
background: #ffe2e2;
}
button {
background: none;
border: 0;
border-radius: 50%;
cursor: pointer;
line-height: inherit;
padding: 0 8px;
font-weight: 900;
color: #000;
&:hover {
color: #e53e3e;
}
}
&.disappearing {
transition: 0.15s;
opacity: 0;
background: #ffaaaa;
}
}
}
`);
}, [h]);
const V = K((n) => {
!j.current || n.target.className !== "gloomy-tag--container" || j.current.focus();
}, []);
return /* @__PURE__ */ v.jsxs("div", { className: "gloomy-tag--container", onClick: V, style: w, children: [
_.map((n) => /* @__PURE__ */ v.jsx(
fe,
{
className: `${$?.tag} ${n.focus && "gloomy-tag--focus"}`,
text: n.tag,
remove: G,
disabled: y
},
n.tag
)),
/* @__PURE__ */ v.jsx(
"input",
{
className: `gloomy-tag--input ${$?.input}`,
type: "text",
name: s,
placeholder: p,
onKeyDown: J,
onBlur: c,
disabled: y,
onKeyUp: Y,
ref: j
}
),
/* @__PURE__ */ v.jsx("style", { children: h })
] });
}
export {
pe as default
};
//# sourceMappingURL=index.js.map