@adyen/adyen-platform-experience-web 1.5.0 → 1.6.0

package/dist/es/components/internal/ErrorMessageDisplay/ErrorMessageDisplay.js

@@ -1,20 +1,20 @@
 import { jsx as r } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
-import n from "../Typography/Typography.js";
-import { TypographyVariant as h } from "../Typography/types.js";
-import { useCallback as b } from "../../../external/preact/hooks/dist/hooks.module.js";
-import I from "../../../core/Context/useCoreContext.js";
+import h from "../Typography/Typography.js";
+import { TypographyVariant as n } from "../Typography/types.js";
+import { useCallback as I } from "../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../core/Context/useCoreContext.js";
 /* empty css                         */
-import N from "../../../images/no-results.svg.js";
-import k from "classnames";
+import k from "../../../images/no-results.svg.js";
+import w from "classnames";
 import { Fragment as p } from "../../../external/preact/dist/preact.module.js";
 import g from "../Button/Button.js";
 const f = {
   md: 680
-}, K = ({
+}, L = ({
   title: x,
-  message: s,
+  message: a,
   imageDesktop: t,
-  imageMobile: a,
+  imageMobile: o,
   withImage: u,
   centered: v,
   refreshComponent: l,
@@ -22,11 +22,12 @@ const f = {
   translationValues: i,
   absolutePosition: E = !0,
   outlined: y = !0,
-  renderSecondaryButton: c
+  renderSecondaryButton: c,
+  withBackground: T
 }) => {
-  const { i18n: e, updateCore: _ } = I(), A = b(
-    (o) => Array.isArray(o) ? o.map(
-      (d, T) => T === 0 ? /* @__PURE__ */ r(p, { children: [
+  const { i18n: e, updateCore: _ } = N(), A = I(
+    (s) => Array.isArray(s) ? s.map(
+      (d, b) => b === 0 ? /* @__PURE__ */ r(p, { children: [
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
       ] }) : /* @__PURE__ */ r(p, { children: [
@@ -34,29 +35,29 @@ const f = {
         e.get(d),
         i && i[d] && /* @__PURE__ */ r(p, { children: i[d] })
       ] })
-    ) : e.get(o),
+    ) : e.get(s),
     [e, i]
   );
   return /* @__PURE__ */ r(
     "div",
     {
-      className: k(["adyen-pe-error-message-display"], {
+      className: w(["adyen-pe-error-message-display"], {
         "adyen-pe-error-message-display--absolute-position": E,
         "adyen-pe-error-message-display--outlined": y,
-        "adyen-pe-error-message-display--with-background": !y,
+        "adyen-pe-error-message-display--with-background": T !== !1 && !y,
         "adyen-pe-error-message-display--centered": v
       }),
       children: [
-        (t || a || u) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
+        (t || o || u) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__illustration", children: /* @__PURE__ */ r("picture", { children: [
           /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(min-width: ${f.md}px)`, srcSet: t }),
-          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: a }),
-          /* @__PURE__ */ r("img", { srcSet: t ?? N, alt: e.get("thereWasAnUnexpectedError") })
+          /* @__PURE__ */ r("source", { type: "image/svg+xml", media: `(max-width: ${f.md}px)`, srcSet: o }),
+          /* @__PURE__ */ r("img", { srcSet: t ?? k, alt: e.get("thereWasAnUnexpectedError") })
         ] }) }),
-        /* @__PURE__ */ r(n, { variant: h.TITLE, children: e.get(x) }),
-        s && /* @__PURE__ */ r(n, { variant: h.BODY, children: A(s) }),
+        /* @__PURE__ */ r(h, { variant: n.TITLE, children: e.get(x) }),
+        a && /* @__PURE__ */ r(h, { variant: n.BODY, children: A(a) }),
         (m || l || c) && /* @__PURE__ */ r("div", { className: "adyen-pe-error-message-display__button", children: [
           c && c(),
-          m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("contactSupport") }),
+          m && /* @__PURE__ */ r(g, { onClick: m, children: e.get("reachOutToSupport") }),
           !m && l && /* @__PURE__ */ r(g, { onClick: _, children: e.get("refresh") })
         ] })
       ]
@@ -64,6 +65,6 @@ const f = {
   );
 };
 export {
-  K as ErrorMessageDisplay,
+  L as ErrorMessageDisplay,
   f as IMAGE_BREAKPOINT_SIZES
 };

package/dist/es/components/internal/FormFields/FileInput/FileInput.js

@@ -0,0 +1,53 @@
+import { jsx as d } from "../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import S from "../../../../core/Context/useCoreContext.js";
+import { useState as y, useRef as M, useCallback as c, useMemo as T, useEffect as b } from "../../../../external/preact/hooks/dist/hooks.module.js";
+import { UploadedFile as v } from "./components/UploadedFile.js";
+import { Dropzone as w } from "./components/Dropzone.js";
+import { validationErrors as l, BASE_CLASS as O } from "./constants.js";
+/* empty css               */
+import { fixedForwardRef as Y } from "../../../../utils/preact/fixedForwardRef.js";
+import { isFunction as g } from "../../../../utils/value/is.js";
+const Q = Y(({ onChange: s, mapError: a, onDelete: u, ...f }, I) => {
+  const [r, p] = y([]), m = M(r), n = r[0], { i18n: i } = S(), { disabled: o } = f, L = c(
+    (e) => {
+      switch (e) {
+        case l.DISALLOWED_FILE_TYPE:
+          return i.get("inputError.disallowedFileType");
+        case l.FILE_REQUIRED:
+          return i.get("inputError.fileRequired");
+        case l.TOO_MANY_FILES:
+          return i.get("inputError.tooManyFiles");
+        case l.VERY_LARGE_FILE:
+          return i.get("inputError.veryLargeFile");
+      }
+    },
+    [i]
+  ), _ = T(() => g(a) ? a : L, [a]), R = c(
+    (e) => {
+      o || (p((t) => {
+        const E = t.findIndex((A) => A === e);
+        if (E < 0)
+          return t;
+        const [...F] = t;
+        return F.splice(E, 1), F;
+      }), u == null || u());
+    },
+    [o, u]
+  ), x = c(
+    (e) => {
+      o || p((t) => t.length === 0 && e.length === 0 ? t : e);
+    },
+    [o]
+  );
+  return b(() => {
+    m.current !== r && (m.current = r, s == null || s([...r]));
+  }, [r, s]), /* @__PURE__ */ d("div", {
+    className: O,
+    // prettier-ignore
+    children: n ? /* @__PURE__ */ d(v, { disabled: o, file: n, deleteFile: () => R(n) }) : /* @__PURE__ */ d(w, { ...f, ref: I, mapError: _, uploadFiles: x })
+  });
+});
+export {
+  Q as FileInput,
+  Q as default
+};

package/dist/es/components/internal/FormFields/FileInput/components/Dropzone.js

@@ -0,0 +1,142 @@
+import { jsx as a } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import x from "classnames";
+import { useState as F, useMemo as Q, useCallback as S } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import N from "../../../Typography/Typography.js";
+import { useTrackedRef as X } from "../../../../../hooks/useTrackedRef.js";
+import Z from "../../../../../core/Context/useCoreContext.js";
+import { DEFAULT_MAX_FILE_SIZE as A, DEFAULT_FILE_TYPES as H, validationErrors as i, BASE_CLASS as t } from "../constants.js";
+import { TypographyVariant as O, TypographyElement as $ } from "../../../Typography/types.js";
+/* empty css                */
+import { fixedForwardRef as J } from "../../../../../utils/preact/fixedForwardRef.js";
+import { getUploadedFilesFromSource as K } from "../../../../../utils/file/upload.js";
+import { Icon as h } from "../../../Icon/Icon.js";
+import { Fragment as ee } from "../../../../../external/preact/dist/preact.module.js";
+import { uniqueId as re } from "../../../../../utils/random/uniqueId.js";
+import { isFunction as R } from "../../../../../utils/value/is.js";
+const o = {
+  dropzone: `${t}__dropzone`,
+  dropzoneDisabled: `${t}__dropzone--disabled`,
+  dropzoneDragOver: `${t}__dropzone--dragover`,
+  dropzoneError: `${t}__dropzone--error`,
+  label: `${t}__label`,
+  labelDefault: `${t}__label-default-content`,
+  labelIcon: `${t}__label-icon`,
+  labelText: `${t}__label-text`,
+  error: `${t}__error`,
+  errorIcon: `${t}__error-icon`,
+  errorText: `${t}__error-text`
+}, ge = J((C, w) => {
+  const {
+    id: v,
+    name: f,
+    children: Y,
+    disabled: s = !1,
+    required: q = !1,
+    maxFileSize: c = A,
+    allowedFileTypes: _ = H,
+    mapError: I,
+    uploadFiles: D
+  } = C, { i18n: y } = Z(), [p, M] = F(""), [m, b] = F(), [V, E] = F(!1), u = !!p, B = f == null ? void 0 : f.trim(), L = Q(() => v || re(), [v]), g = X(w), P = (e) => {
+    var n;
+    Array.from(((n = e.dataTransfer) == null ? void 0 : n.types) ?? []).some((l) => l === "Files") && (e.preventDefault(), E(!0));
+  }, k = (e) => {
+    e.preventDefault(), E(!1);
+  }, U = (e) => {
+    e.preventDefault(), E(!1), z(e.dataTransfer);
+  }, G = (e) => {
+    m && b(void 0), z(e.target);
+  }, W = async (e) => {
+    var r;
+    e.target !== document.activeElement && ((r = e.target) == null || r.checkValidity());
+  }, j = async (e) => {
+    !p && e.target.validity.valueMissing && d(i.FILE_REQUIRED);
+  }, d = S(
+    (e) => {
+      const r = g.current;
+      if (r) {
+        const n = r.required;
+        r.required = !1, r.setCustomValidity(e), M(r.validationMessage ?? ""), r.required = n;
+      }
+    },
+    [g]
+  ), z = S(
+    (e) => {
+      const r = K(e);
+      if (r.length > 1)
+        return d(i.TOO_MANY_FILES);
+      try {
+        const n = r.filter((l) => {
+          if (!_.includes(l.type))
+            throw i.DISALLOWED_FILE_TYPE;
+          const T = R(c) ? c(l.type) ?? A : c;
+          if (l.size > T)
+            throw b({ type: l.type, limit: T }), i.VERY_LARGE_FILE;
+          return !0;
+        });
+        d(""), D(n);
+      } catch (n) {
+        switch (n) {
+          case i.DISALLOWED_FILE_TYPE:
+          case i.VERY_LARGE_FILE:
+            return d(n);
+        }
+      }
+    },
+    [_, c, d, D]
+  );
+  return /* @__PURE__ */ a(ee, { children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        role: "region",
+        className: x(o.dropzone, {
+          [o.dropzoneDisabled]: s,
+          [o.dropzoneDragOver]: V,
+          [o.dropzoneError]: u
+        }),
+        onDragOver: s ? void 0 : P,
+        onDragLeave: s ? void 0 : k,
+        onDrop: s ? void 0 : U,
+        children: [
+          /* @__PURE__ */ a(
+            "input",
+            {
+              type: "file",
+              className: "adyen-pe-visually-hidden",
+              id: L,
+              ref: g,
+              name: B,
+              disabled: s,
+              required: q,
+              accept: String(_),
+              onBlur: W,
+              onChange: G,
+              onInvalid: j,
+              "aria-invalid": u,
+              "data-testId": "dropzone-input"
+            }
+          ),
+          /* @__PURE__ */ a("label", { className: o.label, htmlFor: L, children: Y ?? /* @__PURE__ */ a("div", {
+            className: x(o.labelDefault),
+            // prettier-ignore
+            children: [
+              u ? /* @__PURE__ */ a(h, { name: "warning-filled", className: o.labelIcon }) : /* @__PURE__ */ a(h, { name: "upload", className: o.labelIcon }),
+              /* @__PURE__ */ a(N, { className: o.labelText, el: $.SPAN, variant: O.BODY, stronger: !0, children: y.get("uploadFile.browse") })
+            ]
+          }) })
+        ]
+      }
+    ),
+    u && /* @__PURE__ */ a("div", { className: o.error, children: [
+      /* @__PURE__ */ a(h, { name: "cross-circle-fill", className: o.errorIcon }),
+      /* @__PURE__ */ a(N, { className: o.errorText, el: $.SPAN, variant: O.BODY, children: R(I) ? I(
+        p,
+        m ? { size: m.limit, type: m.type } : void 0
+      ) : y.get(p) })
+    ] })
+  ] });
+});
+export {
+  ge as Dropzone,
+  ge as default
+};

package/dist/es/components/internal/FormFields/FileInput/components/UploadedFile.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import c from "../../../Button/Button.js";
+import r from "../../../Typography/Typography.js";
+import { TypographyVariant as n, TypographyElement as o } from "../../../Typography/types.js";
+import { ButtonVariant as p } from "../../../Button/types.js";
+import { BASE_CLASS as i } from "../constants.js";
+import { useMemo as d } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+/* empty css                */
+import { getHumanReadableFileSize as u } from "../../../../../utils/file/size.js";
+import { Icon as t } from "../../../Icon/Icon.js";
+import { Translation as h } from "../../../Translation/Translation.js";
+const a = {
+  fileBase: `${i}__file`,
+  fileButton: `${i}__file-button`,
+  fileDetails: `${i}__file-details`,
+  fileIcon: `${i}__file-icon`,
+  fileName: `${i}__file-name`,
+  fileSize: `${i}__file-size`
+};
+function D({ file: l, deleteFile: m, disabled: s }) {
+  const f = d(() => u(l.size), [l.size]);
+  return /* @__PURE__ */ e("div", { className: a.fileBase, children: [
+    /* @__PURE__ */ e("div", { className: a.fileDetails, children: [
+      /* @__PURE__ */ e(t, { name: "checkmark-circle-fill", className: a.fileIcon }),
+      /* @__PURE__ */ e("div", { className: a.fileName, title: l.name, children: /* @__PURE__ */ e(r, { el: o.SPAN, variant: n.BODY, stronger: !0, children: l.name }) }),
+      /* @__PURE__ */ e(r, { className: a.fileSize, el: o.SPAN, variant: n.BODY, children: f })
+    ] }),
+    /* @__PURE__ */ e(c, { className: a.fileButton, disabled: s, variant: p.TERTIARY, onClick: m, children: [
+      /* @__PURE__ */ e(t, { name: "trash-can" }),
+      /* @__PURE__ */ e("span", { className: "adyen-pe-visually-hidden", children: /* @__PURE__ */ e(h, { translationKey: "uploadedFile.remove", fills: { filename: l.name } }) })
+    ] })
+  ] });
+}
+export {
+  D as UploadedFile,
+  D as default
+};

package/dist/es/components/internal/FormFields/FileInput/constants.js

@@ -0,0 +1,12 @@
+const _ = "adyen-pe-file-input", e = ["application/pdf", "image/jpeg", "image/jpg", "image/png"], E = 2097152, i = {
+  DISALLOWED_FILE_TYPE: "disallowed_file_type",
+  FILE_REQUIRED: "file_required",
+  TOO_MANY_FILES: "too_many_files",
+  VERY_LARGE_FILE: "very_large_file"
+};
+export {
+  _ as BASE_CLASS,
+  e as DEFAULT_FILE_TYPES,
+  E as DEFAULT_MAX_FILE_SIZE,
+  i as validationErrors
+};

package/dist/es/components/internal/FormFields/Select/BalanceAccountSelector/BalanceAccountSelector.js

@@ -1,41 +1,42 @@
 import { jsx as s } from "../../../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
+import { ALL_BALANCE_ACCOUNTS_SELECTION_ID as _ } from "../../../../../hooks/useBalanceAccountSelection.js";
 import { memo as p } from "../../../../../external/preact/compat/dist/compat.module.js";
-import { useCallback as d } from "../../../../../external/preact/hooks/dist/hooks.module.js";
-import f from "../../../../../core/Context/useCoreContext.js";
-import { useResponsiveContainer as _, containerQueries as S } from "../../../../../hooks/useResponsiveContainer.js";
+import { useCallback as f } from "../../../../../external/preact/hooks/dist/hooks.module.js";
+import S from "../../../../../core/Context/useCoreContext.js";
+import { useResponsiveContainer as d, containerQueries as L } from "../../../../../hooks/useResponsiveContainer.js";
 import { renderDefaultSingleSelectionCheckedness as h } from "../components/SelectListItem.js";
 /* empty css                            */
-import { Fragment as L } from "../../../../../external/preact/dist/preact.module.js";
-import E from "../Select.js";
-const o = "adyen-pe-balance-account-selector", N = `${o}__account-id`, i = `${o}__account-label`, w = p(
+import { Fragment as E } from "../../../../../external/preact/dist/preact.module.js";
+import N from "../Select.js";
+const o = "adyen-pe-balance-account-selector", T = `${o}__account-id`, i = `${o}__account-label`, w = p(
   ({
-    activeBalanceAccount: e,
+    activeBalanceAccount: r,
     balanceAccountSelectionOptions: m,
-    onBalanceAccountSelection: l
+    onBalanceAccountSelection: t
   }) => {
-    const t = _(S.down.xs), { i18n: n } = f(), C = d(
-      (r) => /* @__PURE__ */ s(L, { children: [
-        /* @__PURE__ */ s("div", { className: r.contentClassName, children: [
-          r.item.name && /* @__PURE__ */ s("span", { className: i, children: r.item.name }),
-          /* @__PURE__ */ s("span", { className: r.item.name ? N : i, children: r.item.id })
+    const l = d(L.down.xs), { i18n: C } = S(), n = f(
+      (e) => /* @__PURE__ */ s(E, { children: [
+        /* @__PURE__ */ s("div", { className: e.contentClassName, children: [
+          e.item.name && /* @__PURE__ */ s("span", { className: i, children: e.item.name }),
+          e.item.id !== _ && /* @__PURE__ */ s("span", { className: e.item.name ? T : i, children: e.item.id })
         ] }),
-        h(r)
+        h(e)
       ] }),
       []
     );
     return m && m.length > 1 ? /* @__PURE__ */ s(
-      E,
+      N,
       {
         popoverClassNameModifiers: [o],
-        onChange: l,
+        onChange: t,
         filterable: !1,
         multiSelect: !1,
-        placeholder: (e == null ? void 0 : e.id) || n.get("balanceAccount"),
-        selected: e == null ? void 0 : e.id,
+        placeholder: (r == null ? void 0 : r.id) || C.get("balanceAccount"),
+        selected: r == null ? void 0 : r.id,
         withoutCollapseIndicator: !0,
         items: m,
-        renderListItem: C,
-        showOverlay: t
+        renderListItem: n,
+        showOverlay: l
       }
     ) : null;
   }

package/dist/es/components/internal/FormFields/Select/Select.js

@@ -1,6 +1,6 @@
 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 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";
@@ -13,16 +13,16 @@ 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";
+import { noop as ke } from "../../../../utils/common.js";
 const $e = ({
-  className: O,
-  classNameModifiers: P = Y,
+  className: w,
+  classNameModifiers: O = Y,
   popoverClassNameModifiers: M,
   items: g = Y,
   filterable: u = !1,
   multiSelect: m = !1,
   readonly: j = !1,
-  onChange: F = he,
+  onChange: P = ke,
   selected: H,
   name: _,
   isInvalid: X,
@@ -34,30 +34,31 @@ const $e = ({
   setToTargetWidth: Q,
   withoutCollapseIndicator: V = !1,
   showOverlay: Z = !1,
-  fitPosition: ee
+  fitPosition: ee,
+  fixedPopoverPositioning: te
 }) => {
-  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(() => {
+  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]), se = de(
-    () => fe([
+  }, [f, i, d, o]), ne = $(
+    () => de([
       K,
       { [Ee]: De(m) },
-      ...P.map((e) => `${K}--${e}`),
-      O
+      ...O.map((e) => `${K}--${e}`),
+      w
     ]),
-    [O, P, m]
-  ), { commitAction: N, commitActionButtons: ne, committing: W, resetCommitAction: $ } = Re({
+    [w, O, m]
+  ), { commitAction: x, commitActionButtons: oe, committing: y, resetCommitAction: N } = 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(() => {
+    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)}`;
-    F({ target: { value: e, name: _ } });
-  }, [_, F, n]);
+    P({ target: { value: e, name: _ } });
+  }, [_, P, n]);
   b(() => {
-    switch (N) {
+    switch (x) {
       case U.APPLY:
         S();
         break;
@@ -65,25 +66,25 @@ const $e = ({
         f(), C.current = !0;
         break;
     }
-  }, [N, S, f]);
+  }, [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 le = t.getAttribute("data-value"), ue = g.find((me) => me.id === le);
-        I(ue);
+        const ue = t.getAttribute("data-value"), me = g.find((fe) => fe.id === ue);
+        F(me);
       }
     },
-    [g, I]
+    [g, F]
   );
   b(() => {
-    y.current !== n && (y.current = n, (!m || C.current) && (S(), c())), C.current = !1;
+    B.current !== n && (B.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(
+    y && c();
+  }, [y, c]);
+  const ce = l(
     (e) => {
       switch (e.code) {
         case s.ESCAPE:
@@ -94,7 +95,7 @@ const $e = ({
         case s.SPACE:
           if (u && o) {
             if (e.key === s.ENTER)
-              if (h) A(e);
+              if (k) A(e);
               else break;
             return;
           }
@@ -107,10 +108,10 @@ const $e = ({
       }
       e.preventDefault(), i(!0);
     },
-    [c, u, A, o, i, h]
+    [c, u, A, o, i, k]
   );
   b(() => {
-    o && (cancelAnimationFrame(x.current), x.current = requestAnimationFrame(() => {
+    o && (cancelAnimationFrame(v.current), v.current = requestAnimationFrame(() => {
       var e;
       e: {
         let t = (e = p.current) == null ? void 0 : e.firstElementChild, r;
@@ -128,7 +129,7 @@ const $e = ({
       }
     }));
   }, [o]);
-  const ce = l(
+  const ae = l(
     (e) => {
       const t = e.target;
       switch (e.code) {
@@ -172,13 +173,13 @@ const $e = ({
       }
     },
     [c, u, A]
-  ), ae = l(
+  ), ie = l(
     (e) => {
       const t = e.target.value;
       d(t.toLowerCase());
     },
     [d]
-  ), ie = l(
+  ), le = l(
     (e) => {
       e.preventDefault(), i((t) => !t), o && f(L.current);
     },
@@ -187,26 +188,26 @@ const $e = ({
   return b(() => {
     var e;
     o && u && ((e = E.current) == null || e.focus());
-  }, [u, o]), /* @__PURE__ */ T("div", { className: se, children: [
+  }, [u, o]), /* @__PURE__ */ T("div", { className: ne, children: [
     /* @__PURE__ */ T(
       Ae,
       {
         id: D ?? void 0,
-        appliedFilterNumber: te,
+        appliedFilterNumber: re,
         active: n,
         filterInputRef: E,
         filterable: u,
         isInvalid: X,
         isValid: q,
-        onButtonKeyDown: oe,
-        onInput: ae,
+        onButtonKeyDown: ce,
+        onInput: ie,
         multiSelect: m,
         placeholder: z,
         readonly: j,
-        selectListId: v.current,
+        selectListId: I.current,
         showList: o,
-        toggleButtonRef: k,
-        toggleList: ie,
+        toggleButtonRef: h,
+        toggleList: le,
         withoutCollapseIndicator: V,
         ariaDescribedBy: !J && D ? `${D}${pe}` : ""
       }
@@ -216,21 +217,22 @@ const $e = ({
       {
         popoverClassNameModifiers: M,
         setToTargetWidth: Q,
-        dismissPopover: re,
+        dismissPopover: se,
         active: n,
-        commitActions: ne,
+        commitActions: oe,
         items: g,
         multiSelect: m,
-        onKeyDown: ce,
+        onKeyDown: ae,
         onSelect: A,
-        selectListId: v.current,
+        selectListId: I.current,
         ref: p,
-        toggleButtonRef: k,
+        toggleButtonRef: h,
         renderListItem: G,
         showList: o,
         showOverlay: Z,
-        textFilter: h,
-        fitPosition: ee
+        textFilter: k,
+        fitPosition: ee,
+        fixedPopoverPositioning: te
       }
     )
   ] });