@adyen/adyen-platform-experience-web
Version:
323 lines (322 loc) • 9.03 kB
JavaScript
import { jsx as _ } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/jsx-runtime/dist/jsxRuntime.module.js";
import ve from "classnames";
import { useState as y, useRef as d, useMemo as H, useCallback as c, useEffect as D } from "../../../../external/.pnpm/preact@10.28.2/node_modules/preact/hooks/dist/hooks.module.js";
import { InteractionKeyCode as a } from "../../../types.js";
import { ARIA_ERROR_SUFFIX as Le } from "../../../../core/Errors/constants.js";
import X from "../../../../hooks/useUniqueId.js";
import Pe from "./components/SelectButton.js";
import Ce from "./components/SelectList.js";
import Te from "./hooks/useSelect.js";
import { DROPDOWN_BASE_CLASS as z, DROPDOWN_MULTI_SELECT_CLASS as Fe } from "./constants.js";
/* empty css */
import Oe from "../../../../hooks/useCommitAction/useCommitAction.js";
import { CommitAction as G } from "../../../../hooks/useCommitAction/types.js";
import { EMPTY_ARRAY as B } from "../../../../utils/value/constants.js";
import { boolOrFalse as _e } from "../../../../utils/value/bool.js";
import { noop as ye } from "../../../../utils/common.js";
const Ve = ({
className: W,
classNameModifiers: N = B,
clearable: J = !1,
popoverClassNameModifiers: Q,
items: b = B,
filterable: o = !1,
disableFocusTrap: V = !1,
disableToggleFocusOnClose: K = !1,
multiSelect: m = !1,
readonly: Z = !1,
onChange: k = ye,
selected: ee,
name: R,
isInvalid: te,
isValid: re,
placeholder: ne,
uniqueId: se,
renderListItem: ae,
renderButtonContent: oe,
isCollatingErrors: ie,
setToTargetWidth: ce,
withoutCollapseIndicator: le = !1,
showOverlay: ue = !1,
fitPosition: fe,
fixedPopoverPositioning: de,
onResetAction: me,
buttonVariant: pe,
...Ae
}) => {
const { resetSelection: p, select: x, selection: i } = Te({ items: b, multiSelect: m, selected: ee }), [s, f] = y(!1), [g, I] = y(""), [A, u] = y(-1), w = d(null), C = d(null), T = d(null), be = `elem-${X()}`, F = se ?? be, U = `select-${X()}`, $ = d(), v = d(!0), O = d(!1), h = d(i), q = d(i), Re = H(() => i.length, [i]), ge = c(() => {
I(""), f(!1), u(-1), s && (p(h.current), v.current = !0);
}, [p, f, I, s]), Ie = H(
() => ve([
z,
{ [Fe]: _e(m) },
...N.map((e) => `${z}--${e}`),
W
]),
[W, N, m]
), { commitAction: Y, commitActionButtons: Ee, committing: M, resetCommitAction: j } = Oe({
resetDisabled: !i.length,
onResetAction: me
}), l = c(() => {
I(""), f(!1), u(-1), j(), v.current ? v.current = !1 : K || T.current?.focus();
}, [K, j, f, I]), L = c(() => {
h.current = i;
const e = `${i.map(({ id: t }) => t)}`;
k({ target: { value: e, name: R } });
}, [R, k, i]), P = c(() => {
p(), h.current = B, k({ target: { value: "", name: R } });
}, [R, k, p]);
D(() => {
switch (Y) {
case G.APPLY:
L();
break;
case G.CLEAR:
O.current = !0, P();
break;
}
}, [P, Y, L, R, k, p]);
const S = c(
(e) => {
e.preventDefault();
const t = e.currentTarget && C?.current?.contains(e.currentTarget) ? e.currentTarget : null;
if (t && !t.getAttribute("data-disabled")) {
const r = t.getAttribute("data-value"), n = b.find((E) => E.id === r);
x(n);
}
},
[b, x]
);
D(() => {
q.current !== i && (q.current = i, (!m || O.current) && s && (L(), l())), O.current = !1;
}, [l, L, m, i, s]), D(() => {
M && l();
}, [M, l]), D(() => {
s || (h.current = i);
}, [i, s]);
const De = c(
(e) => {
switch (e.code) {
case a.ESCAPE:
case a.TAB:
s && l(), v.current = e.key === a.TAB;
return;
case a.ENTER:
case a.SPACE:
if (o && s) {
if (e.key === a.ENTER)
if (g)
S(e);
else
break;
return;
}
break;
case a.ARROW_DOWN:
case a.ARROW_UP:
if (o && s)
return;
break;
default:
return;
}
e.preventDefault(), f(!0);
},
[l, o, S, s, f, g]
);
D(() => {
s && (cancelAnimationFrame($.current), $.current = requestAnimationFrame(() => {
e: {
let e = C.current?.firstElementChild, t, r = 0;
for (; e; ) {
if (!(e.dataset.disabled && e.dataset.disabled === "true")) {
if (e.getAttribute("aria-selected") === "true") {
e.tabIndex = 0, o ? u(r) : e.focus();
break e;
}
t = t || e, r++;
}
e = e.nextElementSibling;
}
t && !o && (t.tabIndex = 0, t.focus());
}
}));
}, [o, s]);
const ke = c(
(e) => {
const t = e.target;
switch (e.code) {
case a.ESCAPE:
e.preventDefault(), e.stopPropagation(), l();
break;
case a.ENTER:
case a.SPACE:
S(e);
break;
case a.ARROW_DOWN: {
e.preventDefault();
let r = t.nextElementSibling;
for (; r; ) {
if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
t.tabIndex = -1, r.tabIndex = 0, r.focus();
break;
}
r = r.nextElementSibling;
}
break;
}
case a.ARROW_UP: {
e.preventDefault();
e: {
let r = t.previousElementSibling;
for (; r; ) {
if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
t.tabIndex = -1, r.tabIndex = 0, r.focus();
break e;
}
r = r.previousElementSibling;
}
o && w.current && w.current.focus();
}
break;
}
}
},
[l, o, S]
), he = c(
(e) => {
if (!o || !s) return;
const t = b.filter((n) => !g || n.name.toLowerCase().includes(g)), r = t.filter((n) => !n.disabled);
switch (e.code) {
case a.ESCAPE:
e.preventDefault(), l();
break;
case a.ENTER:
if (e.preventDefault(), A >= 0 && A < t.length) {
const n = t[A];
n && !n?.disabled && x(n);
}
break;
case a.ARROW_DOWN: {
if (e.preventDefault(), r.length === 0) break;
let n = A + 1;
for (; n < t.length; ) {
if (!t[n]?.disabled) {
u(n);
break;
}
n++;
}
if (n >= t.length) {
for (let E = 0; E < t.length; E++)
if (!t[E]?.disabled) {
u(E);
break;
}
}
break;
}
case a.ARROW_UP: {
if (e.preventDefault(), r.length === 0) break;
let n = A - 1;
for (; n >= 0; ) {
if (!t[n]?.disabled) {
u(n);
break;
}
n--;
}
n < 0 && u(-1);
break;
}
}
},
[o, s, b, g, A, l, x]
), Se = c(
(e) => {
const t = e.target.value;
I(t.toLowerCase()), u(-1);
},
[I]
), xe = c(
(e) => {
e.preventDefault(), f((t) => !t), s && p(h.current);
},
[f, s, p]
);
D(() => {
if (s && o) {
const e = requestAnimationFrame(() => {
w.current?.focus();
});
return u(-1), () => cancelAnimationFrame(e);
}
}, [o, s]);
const we = c(
(e) => {
e?.preventDefault?.(), e?.stopPropagation?.(), P();
},
[P]
);
return /* @__PURE__ */ _("div", { className: Ie, children: [
/* @__PURE__ */ _(
Pe,
{
buttonVariant: pe,
id: F,
appliedFilterNumber: Re,
active: i,
clearable: J,
filterInputRef: w,
filterable: o,
isInvalid: te,
isValid: re,
name: R,
onClear: we,
onButtonKeyDown: De,
onFilterInputKeyDown: he,
multiSelect: m,
placeholder: ne,
readonly: Z,
renderButtonContent: oe,
selectListId: U,
showList: s,
toggleButtonRef: T,
toggleList: xe,
withoutCollapseIndicator: le,
ariaDescribedBy: !ie && F ? `${F}${Le}` : void 0,
...Ae,
onInput: Se
}
),
/* @__PURE__ */ _(
Ce,
{
popoverClassNameModifiers: Q,
setToTargetWidth: ce,
dismissPopover: ge,
active: i,
commitActions: Ee,
items: b,
multiSelect: m,
disableFocusTrap: V || o,
onKeyDown: ke,
onSelect: S,
selectListId: U,
ref: C,
toggleButtonRef: T,
renderListItem: ae,
showList: s,
showOverlay: ue,
textFilter: g,
activeIndex: o ? A : void 0,
filterable: o,
fitPosition: fe,
fixedPopoverPositioning: de
}
)
] });
};
export {
Ve as default
};