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