@adyen/adyen-platform-experience-web
Version:
243 lines (242 loc) • 6.77 kB
JavaScript
import { jsx as T } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import de from "classnames";
import { useState as W, useRef as a, useMemo as $, useCallback as l, 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 ke } from "../../../../utils/common.js";
const $e = ({
className: w,
classNameModifiers: O = Y,
popoverClassNameModifiers: M,
items: g = Y,
filterable: u = !1,
multiSelect: m = !1,
readonly: j = !1,
onChange: P = ke,
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,
fixedPopoverPositioning: te
}) => {
const { resetSelection: f, select: F, selection: n } = ge({ items: g, multiSelect: m, selected: H }), [o, i] = W(!1), [k, d] = W(""), E = a(null), p = a(null), h = a(null), I = a(`select-${Se()}`), v = a(), R = a(!0), C = a(!1), L = a(n), B = a(n), re = $(() => n.length, [n]), se = l(() => {
d(""), i(!1), o && (f(L.current), R.current = !0);
}, [f, i, d, o]), ne = $(
() => de([
K,
{ [Ee]: De(m) },
...O.map((e) => `${K}--${e}`),
w
]),
[w, O, m]
), { commitAction: x, commitActionButtons: oe, committing: y, resetCommitAction: N } = Re({
resetDisabled: !n.length
}), c = l(() => {
var e;
d(""), i(!1), N(), R.current ? R.current = !1 : (e = h.current) == null || e.focus();
}, [N, i, d]), S = l(() => {
L.current = n;
const e = `${n.map(({ id: t }) => t)}`;
P({ target: { value: e, name: _ } });
}, [_, P, n]);
b(() => {
switch (x) {
case U.APPLY:
S();
break;
case U.CLEAR:
f(), C.current = !0;
break;
}
}, [x, 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 ue = t.getAttribute("data-value"), me = g.find((fe) => fe.id === ue);
F(me);
}
},
[g, F]
);
b(() => {
B.current !== n && (B.current = n, (!m || C.current) && (S(), c())), C.current = !1;
}, [c, S, m, n]), b(() => {
y && c();
}, [y, c]);
const ce = 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 (k) 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, k]
);
b(() => {
o && (cancelAnimationFrame(v.current), v.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 ae = 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]
), ie = l(
(e) => {
const t = e.target.value;
d(t.toLowerCase());
},
[d]
), le = 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: ne, children: [
/* @__PURE__ */ T(
Ae,
{
id: D ?? void 0,
appliedFilterNumber: re,
active: n,
filterInputRef: E,
filterable: u,
isInvalid: X,
isValid: q,
onButtonKeyDown: ce,
onInput: ie,
multiSelect: m,
placeholder: z,
readonly: j,
selectListId: I.current,
showList: o,
toggleButtonRef: h,
toggleList: le,
withoutCollapseIndicator: V,
ariaDescribedBy: !J && D ? `${D}${pe}` : ""
}
),
/* @__PURE__ */ T(
be,
{
popoverClassNameModifiers: M,
setToTargetWidth: Q,
dismissPopover: se,
active: n,
commitActions: oe,
items: g,
multiSelect: m,
onKeyDown: ae,
onSelect: A,
selectListId: I.current,
ref: p,
toggleButtonRef: h,
renderListItem: G,
showList: o,
showOverlay: Z,
textFilter: k,
fitPosition: ee,
fixedPopoverPositioning: te
}
)
] });
};
export {
$e as default
};