UNPKG

welcome-ui

Version:

Customizable design system with react, typescript, tailwindcss and ariakit.

1,011 lines (1,010 loc) 22.3 kB
"use client"; import { jsx as I, jsxs as P } from "react/jsx-runtime"; import { D as me, F as Ke } from "./field-icon-size-Cj-yrCqM.js"; import { g as Pe, c as Ee } from "./index-PAaZGbyz.js"; import $e, { forwardRef as Ye, useMemo as Be, useState as $, useEffect as _e, useCallback as Ze, Fragment as Xe } from "react"; import { CloseButton as Qe } from "./CloseButton.js"; import { useField as qe } from "./Field.js"; import "./Icon-BisRi8B3.js"; import { D as Ge } from "./index-CTgip19b.js"; import { c as Je } from "./create-event-rXDe5aCQ.js"; import { u as en } from "./useForkRef-D807AV7D.js"; import { Tag as nn } from "./Tag.js"; var H = { exports: {} }, he; function tn() { if (he) return H.exports; he = 1; var e = { À: "A", Á: "A", Â: "A", Ã: "A", Ä: "A", Å: "A", Ấ: "A", Ắ: "A", Ẳ: "A", Ẵ: "A", Ặ: "A", Æ: "AE", Ầ: "A", Ằ: "A", Ȃ: "A", Ả: "A", Ạ: "A", Ẩ: "A", Ẫ: "A", Ậ: "A", Ç: "C", Ḉ: "C", È: "E", É: "E", Ê: "E", Ë: "E", Ế: "E", Ḗ: "E", Ề: "E", Ḕ: "E", Ḝ: "E", Ȇ: "E", Ẻ: "E", Ẽ: "E", Ẹ: "E", Ể: "E", Ễ: "E", Ệ: "E", Ì: "I", Í: "I", Î: "I", Ï: "I", Ḯ: "I", Ȋ: "I", Ỉ: "I", Ị: "I", Ð: "D", Ñ: "N", Ò: "O", Ó: "O", Ô: "O", Õ: "O", Ö: "O", Ø: "O", Ố: "O", Ṍ: "O", Ṓ: "O", Ȏ: "O", Ỏ: "O", Ọ: "O", Ổ: "O", Ỗ: "O", Ộ: "O", Ờ: "O", Ở: "O", Ỡ: "O", Ớ: "O", Ợ: "O", Ù: "U", Ú: "U", Û: "U", Ü: "U", Ủ: "U", Ụ: "U", Ử: "U", Ữ: "U", Ự: "U", Ý: "Y", à: "a", á: "a", â: "a", ã: "a", ä: "a", å: "a", ấ: "a", ắ: "a", ẳ: "a", ẵ: "a", ặ: "a", æ: "ae", ầ: "a", ằ: "a", ȃ: "a", ả: "a", ạ: "a", ẩ: "a", ẫ: "a", ậ: "a", ç: "c", ḉ: "c", è: "e", é: "e", ê: "e", ë: "e", ế: "e", ḗ: "e", ề: "e", ḕ: "e", ḝ: "e", ȇ: "e", ẻ: "e", ẽ: "e", ẹ: "e", ể: "e", ễ: "e", ệ: "e", ì: "i", í: "i", î: "i", ï: "i", ḯ: "i", ȋ: "i", ỉ: "i", ị: "i", ð: "d", ñ: "n", ò: "o", ó: "o", ô: "o", õ: "o", ö: "o", ø: "o", ố: "o", ṍ: "o", ṓ: "o", ȏ: "o", ỏ: "o", ọ: "o", ổ: "o", ỗ: "o", ộ: "o", ờ: "o", ở: "o", ỡ: "o", ớ: "o", ợ: "o", ù: "u", ú: "u", û: "u", ü: "u", ủ: "u", ụ: "u", ử: "u", ữ: "u", ự: "u", ý: "y", ÿ: "y", Ā: "A", ā: "a", Ă: "A", ă: "a", Ą: "A", ą: "a", Ć: "C", ć: "c", Ĉ: "C", ĉ: "c", Ċ: "C", ċ: "c", Č: "C", č: "c", C̆: "C", c̆: "c", Ď: "D", ď: "d", Đ: "D", đ: "d", Ē: "E", ē: "e", Ĕ: "E", ĕ: "e", Ė: "E", ė: "e", Ę: "E", ę: "e", Ě: "E", ě: "e", Ĝ: "G", Ǵ: "G", ĝ: "g", ǵ: "g", Ğ: "G", ğ: "g", Ġ: "G", ġ: "g", Ģ: "G", ģ: "g", Ĥ: "H", ĥ: "h", Ħ: "H", ħ: "h", Ḫ: "H", ḫ: "h", Ĩ: "I", ĩ: "i", Ī: "I", ī: "i", Ĭ: "I", ĭ: "i", Į: "I", į: "i", İ: "I", ı: "i", IJ: "IJ", ij: "ij", Ĵ: "J", ĵ: "j", Ķ: "K", ķ: "k", Ḱ: "K", ḱ: "k", K̆: "K", k̆: "k", Ĺ: "L", ĺ: "l", Ļ: "L", ļ: "l", Ľ: "L", ľ: "l", Ŀ: "L", ŀ: "l", Ł: "l", ł: "l", Ḿ: "M", ḿ: "m", M̆: "M", m̆: "m", Ń: "N", ń: "n", Ņ: "N", ņ: "n", Ň: "N", ň: "n", ʼn: "n", N̆: "N", n̆: "n", Ō: "O", ō: "o", Ŏ: "O", ŏ: "o", Ő: "O", ő: "o", Œ: "OE", œ: "oe", P̆: "P", p̆: "p", Ŕ: "R", ŕ: "r", Ŗ: "R", ŗ: "r", Ř: "R", ř: "r", R̆: "R", r̆: "r", Ȓ: "R", ȓ: "r", Ś: "S", ś: "s", Ŝ: "S", ŝ: "s", Ş: "S", Ș: "S", ș: "s", ş: "s", Š: "S", š: "s", Ţ: "T", ţ: "t", ț: "t", Ț: "T", Ť: "T", ť: "t", Ŧ: "T", ŧ: "t", T̆: "T", t̆: "t", Ũ: "U", ũ: "u", Ū: "U", ū: "u", Ŭ: "U", ŭ: "u", Ů: "U", ů: "u", Ű: "U", ű: "u", Ų: "U", ų: "u", Ȗ: "U", ȗ: "u", V̆: "V", v̆: "v", Ŵ: "W", ŵ: "w", Ẃ: "W", ẃ: "w", X̆: "X", x̆: "x", Ŷ: "Y", ŷ: "y", Ÿ: "Y", Y̆: "Y", y̆: "y", Ź: "Z", ź: "z", Ż: "Z", ż: "z", Ž: "Z", ž: "z", ſ: "s", ƒ: "f", Ơ: "O", ơ: "o", Ư: "U", ư: "u", Ǎ: "A", ǎ: "a", Ǐ: "I", ǐ: "i", Ǒ: "O", ǒ: "o", Ǔ: "U", ǔ: "u", Ǖ: "U", ǖ: "u", Ǘ: "U", ǘ: "u", Ǚ: "U", ǚ: "u", Ǜ: "U", ǜ: "u", Ứ: "U", ứ: "u", Ṹ: "U", ṹ: "u", Ǻ: "A", ǻ: "a", Ǽ: "AE", ǽ: "ae", Ǿ: "O", ǿ: "o", Þ: "TH", þ: "th", Ṕ: "P", ṕ: "p", Ṥ: "S", ṥ: "s", X́: "X", x́: "x", Ѓ: "Г", ѓ: "г", Ќ: "К", ќ: "к", A̋: "A", a̋: "a", E̋: "E", e̋: "e", I̋: "I", i̋: "i", Ǹ: "N", ǹ: "n", Ồ: "O", ồ: "o", Ṑ: "O", ṑ: "o", Ừ: "U", ừ: "u", Ẁ: "W", ẁ: "w", Ỳ: "Y", ỳ: "y", Ȁ: "A", ȁ: "a", Ȅ: "E", ȅ: "e", Ȉ: "I", ȉ: "i", Ȍ: "O", ȍ: "o", Ȑ: "R", ȑ: "r", Ȕ: "U", ȕ: "u", B̌: "B", b̌: "b", Č̣: "C", č̣: "c", Ê̌: "E", ê̌: "e", F̌: "F", f̌: "f", Ǧ: "G", ǧ: "g", Ȟ: "H", ȟ: "h", J̌: "J", ǰ: "j", Ǩ: "K", ǩ: "k", M̌: "M", m̌: "m", P̌: "P", p̌: "p", Q̌: "Q", q̌: "q", Ř̩: "R", ř̩: "r", Ṧ: "S", ṧ: "s", V̌: "V", v̌: "v", W̌: "W", w̌: "w", X̌: "X", x̌: "x", Y̌: "Y", y̌: "y", A̧: "A", a̧: "a", B̧: "B", b̧: "b", Ḑ: "D", ḑ: "d", Ȩ: "E", ȩ: "e", Ɛ̧: "E", ɛ̧: "e", Ḩ: "H", ḩ: "h", I̧: "I", i̧: "i", Ɨ̧: "I", ɨ̧: "i", M̧: "M", m̧: "m", O̧: "O", o̧: "o", Q̧: "Q", q̧: "q", U̧: "U", u̧: "u", X̧: "X", x̧: "x", Z̧: "Z", z̧: "z", й: "и", Й: "И", ё: "е", Ё: "Е" }, n = Object.keys(e).join("|"), t = new RegExp(n, "g"), r = new RegExp(n, ""); function s(a) { return e[a]; } var l = function(a) { return a.replace(t, s); }, i = function(a) { return !!a.match(r); }; return H.exports = l, H.exports.has = i, H.exports.remove = l, H.exports; } var rn = tn(); const sn = /* @__PURE__ */ Pe(rn); /** * @name match-sorter * @license MIT license. * @copyright (c) 2020 Kent C. Dodds * @author Kent C. Dodds <me@kentcdodds.com> (https://kentcdodds.com) */ const A = { CASE_SENSITIVE_EQUAL: 7, EQUAL: 6, STARTS_WITH: 5, WORD_STARTS_WITH: 4, CONTAINS: 3, ACRONYM: 2, MATCHES: 1, NO_MATCH: 0 }, cn = (e, n) => String(e.rankedValue).localeCompare(String(n.rankedValue)); function G(e, n, t) { t === void 0 && (t = {}); const { keys: r, threshold: s = A.MATCHES, baseSort: l = cn, sorter: i = (d) => d.sort((u, _) => un(u, _, l)) } = t, a = e.reduce(o, []); return i(a).map((d) => { let { item: u } = d; return u; }); function o(d, u, _) { const x = an(u, r, n, t), { rank: g, keyThreshold: m = s } = x; return g >= m && d.push({ ...x, item: u, index: _ }), d; } } G.rankings = A; function an(e, n, t, r) { if (!n) { const l = e; return { // ends up being duplicate of 'item' in matches but consistent rankedValue: l, rank: ge(l, t, r), keyIndex: -1, keyThreshold: r.threshold }; } return mn(e, n).reduce((l, i, a) => { let { rank: o, rankedValue: d, keyIndex: u, keyThreshold: _ } = l, { itemValue: x, attributes: g } = i, m = ge(x, t, r), k = d; const { minRanking: D, maxRanking: R, threshold: U } = g; return m < D && m >= A.MATCHES ? m = D : m > R && (m = R), m > o && (o = m, u = a, _ = U, k = x), { rankedValue: k, rank: o, keyIndex: u, keyThreshold: _ }; }, { rankedValue: e, rank: A.NO_MATCH, keyIndex: -1, keyThreshold: r.threshold }); } function ge(e, n, t) { return e = pe(e, t), n = pe(n, t), n.length > e.length ? A.NO_MATCH : e === n ? A.CASE_SENSITIVE_EQUAL : (e = e.toLowerCase(), n = n.toLowerCase(), e === n ? A.EQUAL : e.startsWith(n) ? A.STARTS_WITH : e.includes(` ${n}`) ? A.WORD_STARTS_WITH : e.includes(n) ? A.CONTAINS : n.length === 1 ? A.NO_MATCH : on(e).includes(n) ? A.ACRONYM : ln(e, n)); } function on(e) { let n = ""; return e.split(" ").forEach((r) => { r.split("-").forEach((l) => { n += l.substr(0, 1); }); }), n; } function ln(e, n) { let t = 0, r = 0; function s(o, d, u) { for (let _ = u, x = d.length; _ < x; _++) if (d[_] === o) return t += 1, _ + 1; return -1; } function l(o) { const d = 1 / o, u = t / n.length; return A.MATCHES + u * d; } const i = s(n[0], e, 0); if (i < 0) return A.NO_MATCH; r = i; for (let o = 1, d = n.length; o < d; o++) { const u = n[o]; if (r = s(u, e, r), !(r > -1)) return A.NO_MATCH; } const a = r - i; return l(a); } function un(e, n, t) { const { rank: l, keyIndex: i } = e, { rank: a, keyIndex: o } = n; return l === a ? i === o ? t(e, n) : i < o ? -1 : 1 : l > a ? -1 : 1; } function pe(e, n) { let { keepDiacritics: t } = n; return e = `${e}`, t || (e = sn(e)), e; } function dn(e, n) { typeof n == "object" && (n = n.key); let t; if (typeof n == "function") t = n(e); else if (e == null) t = null; else if (Object.hasOwnProperty.call(e, n)) t = e[n]; else { if (n.includes(".")) return fn(n, e); t = null; } return t == null ? [] : Array.isArray(t) ? t : [String(t)]; } function fn(e, n) { const t = e.split("."); let r = [n]; for (let s = 0, l = t.length; s < l; s++) { const i = t[s]; let a = []; for (let o = 0, d = r.length; o < d; o++) { const u = r[o]; if (u != null) if (Object.hasOwnProperty.call(u, i)) { const _ = u[i]; _ != null && a.push(_); } else i === "*" && (a = a.concat(u)); } r = a; } return Array.isArray(r[0]) ? [].concat(...r) : r; } function mn(e, n) { const t = []; for (let r = 0, s = n.length; r < s; r++) { const l = n[r], i = _n(l), a = dn(e, l); for (let o = 0, d = a.length; o < d; o++) t.push({ itemValue: a[o], attributes: i }); } return t; } const Ae = { maxRanking: 1 / 0, minRanking: -1 / 0 }; function _n(e) { return typeof e == "string" ? Ae : { ...Ae, ...e }; } const hn = "_indicators_cxg1w_2", gn = "_open_cxg1w_33", pn = "_root_cxg1w_49", An = "_clearable_cxg1w_83", wn = "_transparent_cxg1w_101", In = "_wrapper_cxg1w_208", xn = "_disabled_cxg1w_212", En = "_menu_cxg1w_215", vn = "_item_cxg1w_243", On = "_highlighted_cxg1w_257", yn = "_selected_cxg1w_260", Cn = "_multiple_cxg1w_260", bn = "_allowUnselectFromList_cxg1w_264", Nn = "_tags_cxg1w_272", ve = { indicators: hn, "size-xs": "_size-xs_cxg1w_11", "dropdown-indicator": "_dropdown-indicator_cxg1w_14", "styled-icon": "_styled-icon_cxg1w_27", open: gn, "input-wrapper": "_input-wrapper_cxg1w_42", "icon-placement-right": "_icon-placement-right_cxg1w_45", root: pn, "icon-placement-left": "_icon-placement-left_cxg1w_80", "icon-placement-both": "_icon-placement-both_cxg1w_80", clearable: An, transparent: wn, "variant-danger": "_variant-danger_cxg1w_136", "variant-success": "_variant-success_cxg1w_140", "variant-warning": "_variant-warning_cxg1w_144", "size-lg": "_size-lg_cxg1w_148", "size-md": "_size-md_cxg1w_155", "size-sm": "_size-sm_cxg1w_162", "icon-wrapper": "_icon-wrapper_cxg1w_177", wrapper: In, disabled: xn, menu: En, item: vn, highlighted: On, selected: yn, multiple: Cn, allowUnselectFromList: bn, tags: Nn, "styled-tag": "_styled-tag_cxg1w_275" }, we = Ee(ve); function Rn(e, n) { return /* @__PURE__ */ I("div", { className: we("tags"), role: "list", children: e.map((t) => ( // TODO migrate after WUI-187/tag /* @__PURE__ */ I( nn, { className: we("styled-tag"), onRemove: () => n(t.value.toString()), role: "listitem", children: t.label }, t.value ) )) }); } const ee = "", Sn = /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g, Oe = (e) => { if (typeof e == "number") return String(e); if (typeof e == "string") { const n = e.match(Sn); return n && n.map((t) => t.toLowerCase()).join("-"); } }, Ie = (e) => e ? e.label : ee, kn = (e) => e.reduce( (n, t) => t.label && n.length > t.label.length ? n : t.label, ee ), Un = (e, n, t) => { const r = n.find((s) => e.value === s.value); return r && t ? n.filter((s) => e.value !== s.value) : r ? n : [...n, e]; }, q = (e, n) => !!n.find((t) => t.value === e), J = (e, n = []) => n.find( (r) => r.label === (e.label || e) || r.value === (e.value || e) ) || { label: e, value: Oe(e) }, Vn = (e, n, t = !1) => { const r = t ? n.flatMap((s) => s.options) : n; return !e && e !== 0 ? [] : Array.isArray(e) ? e.map((s) => J(s, r)) : [J(e, r)]; }, Tn = (e, n) => !!n.find((t) => t.value === e.value), Hn = (e, n) => Tn(e, n) ? e.value : e.label, xe = (e, n) => e ? e.map((t) => Hn(t, n)) : [], Dn = (e, n) => e ? e.filter( (t) => !n.find((r) => r.value === t.value) ) : [], Fn = ({ inputValue: e, isMultiple: n, isSearchable: t, options: r, renderItem: s }) => { const l = J(e, r); return n ? e : l.label ? t ? l.label : s(l) : ee; }, O = Ee(ve), zn = me.default || me, Qn = Ye( ({ allowUnselectFromList: e, autoComplete: n = "off", autoFocus: t, className: r, dataTestId: s, disableCloseOnSelect: l, disabled: i, groupsEnabled: a, icon: o, iconPlacement: d = "left", id: u, isClearable: _, isCreatable: x, isMultiple: g, isSearchable: m, name: k, onBlur: D, onChange: R, onClick: U, onCreate: Y, onFocus: ye, options: w = [], placeholder: ne = "Choose from…", renderCreateItem: Ce = (z) => `Create "${z}"`, renderGroupHeader: te, renderItem: F = Ie, renderMultiple: be = Rn, size: V = "md", transparent: re, value: se, variant: ce, ...ae }, Ne) => { const { getInputProps: z, variant: Re } = qe(), oe = Re || ce, M = Be( () => Vn(se, w, a), [se, w, a] ), B = !g && M[0] || null, Z = B ? B.label : "", [C, X] = $(M), [y, T] = $(Z), [j, W] = $(w), [b, S] = $(!1); m = x || m; const [Q, Se] = en(Ne); _e(() => { t && Q.current && (Q.current.focus(), m && S(!0)); }, [m, t, Q]), _e(() => { X(M), T(Z), W(w); }, [Z, w, M]); const ke = (c) => { if (m && c !== y) { let f = []; a ? f = G(w, c, { // should match on group.label OR group.options.label keys: [(p) => p.label, (p) => p.options.map((E) => E.label)] }) : f = G(w, c, { keys: ["label"] }), T(c), W(f); } }, Ue = () => { m && !b && S(!0); }, le = (c) => { let f = []; a ? f = xe( c, w.flatMap((h) => h.options) ) : f = xe(c, w); const p = g ? f : f[0], E = Je({ name: k, value: g ? c : c[0] }); if (R == null || R(p, E), x) { const h = Dn(c, w); h.length && (Y == null || Y(h[0].label, E)); } }, Ve = (c) => { let f, p; !c || c != null && c.disabled ? (f = g ? C : [], p = !0) : (f = g ? Un(c, C, e) : [c], p = g), p && T(""), W(w), X(f), le(f), l || S(!1); }, Te = (c) => { const f = C.filter((p) => p.value !== c); X(f), le(f); }, He = (c) => { U == null || U(c), S(!b); }, De = (c) => { g && c.selectedItem ? T("") : m && c.selectedItem && T(c.selectedItem.label), W(w), S(!1); }, Fe = kn(w), ie = Fn({ inputValue: y, isMultiple: g, isSearchable: m, options: w, renderItem: F }), ze = Ze( ({ getItemProps: c, highlightedIndex: f, options: p }) => p.reduce( (E, h, L) => { if (a && "options" in h) E.itemsToRender.push( /* @__PURE__ */ P(Xe, { children: [ te(h), h.options ? h.options.map((v) => { const N = E.itemIndex++, K = q(v.value, C); return /* @__PURE__ */ I( "li", { className: O( "item", f === N && "highlighted", g && "multiple", e && "allowUnselectFromList", v.disabled && "disabled", K && "selected" ), ...c({ index: N, item: v }), children: F(v, K) }, v.value ); }) : null ] }, h.label) ); else if ("value" in h) { const v = q(h.value, C), N = f === L; E.itemsToRender.push( /* @__PURE__ */ I( "li", { className: O( "item", N && "highlighted", g && "multiple", e && "allowUnselectFromList", h.disabled && "disabled", v && "selected" ), ...c({ index: L, item: h }), children: F(h, v) }, h.value ) ); } return E; }, { itemIndex: 0, itemsToRender: [] } ).itemsToRender, [g, e, C, a, te, F] ), Me = Ke[V], ue = O( "root", `size-${V}`, oe && `variant-${oe}`, _ && "clearable", re && "transparent", o && `icon-placement-${d}`, r ); return /* @__PURE__ */ I( zn, { id: u, inputValue: m ? ie : "", isOpen: b, itemToString: Ie, onInputValueChange: ke, onOuterClick: De, onSelect: Ve, selectedItem: B, children: ({ clearSelection: c, getInputProps: f, getItemProps: p, getMenuProps: E, getRootProps: h, getToggleButtonProps: L, highlightedIndex: v }) => { const N = !!(x && y && !q(y, C)), K = b && (j.length || N), de = _ && y, je = /* @__PURE__ */ I("div", { className: O("dropdown-indicator", b && "open"), children: /* @__PURE__ */ I( Qe, { animatePresence: !0, onClick: c, title: "Clear" } ) }), We = /* @__PURE__ */ I( "div", { className: O("dropdown-indicator", b && "open"), "data-testid": s ? `${s}-arrow-icon` : null, disabled: i, tabIndex: -1, ...L({ onClick: () => S(!b) }), children: /* @__PURE__ */ I(Ge, { className: O("styled-icon"), size: "sm" }) } ), Le = h(ae, { suppressRefError: !0 }), fe = f({ autoComplete: n, autoFocus: t, "data-spacer": Fe || ne, "data-testid": s, disabled: i, id: u, name: k, onBlur: D, onClick: i ? void 0 : He, onFocus: ye, onKeyDown: Ue, placeholder: ne, ref: Se, size: V, tabIndex: 0, transparent: re, variant: b ? "focused" : ce, ...ae }); return /* @__PURE__ */ P("div", { ...Le, className: O("wrapper", i && "disabled"), children: [ m ? /* @__PURE__ */ I( "input", { className: ue, type: "text", ...z(fe) } ) : /* @__PURE__ */ I("div", { className: ue, ...z(fe), children: ie }), o ? /* @__PURE__ */ I("div", { className: O("icon-wrapper", "icon-placement-left", `size-${V}`), children: $e.cloneElement(o, { ...o.props, size: Me }) }) : null, /* @__PURE__ */ P("div", { className: O("indicators", `size-${V}`), children: [ de ? je : null, We ] }), K ? /* @__PURE__ */ P("ul", { className: O("menu"), ...E(), children: [ ze({ getItemProps: p, highlightedIndex: v, options: j }), N && y.length ? /* @__PURE__ */ I( "li", { className: O("item", v === j.length && "highlighted"), ...p({ index: j.length, item: { label: y, value: Oe(y) } }), children: Ce(y) }, "add" ) : null ] }) : null, g ? be(C, Te) : null ] }); } } ); } ); export { Qn as Select };