@adyen/adyen-platform-experience-web 1.0.0-beta → 1.0.0-beta.2

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

@@ -1,300 +1,241 @@
-import '../../../../../Select.css';
-import { o } from "../../../../../jsxRuntime.module-69493d81.mjs";
-import cx from "classnames";
-import { h, _, T, F, p } from "../../../../../hooks.module-8565d716.mjs";
-import { I as InteractionKeyCode } from "../../../../../types-0aaff3aa.mjs";
-import { ARIA_ERROR_SUFFIX } from "../../../../core/Errors/constants.js";
-import { noop } from "../../../../utils/common/index.js";
-import useCommitAction from "../../../../hooks/useCommitAction/useCommitAction.js";
-import { C as CommitAction } from "../../../../../types-e6a6a3ff.mjs";
-import uuidv4 from "../../../../utils/uuid.js";
-import SelectButton from "./components/SelectButton.js";
-import SelectList from "./components/SelectList.js";
-import useSelect from "./hooks/useSelect.js";
-import { DROPDOWN_BASE_CLASS, DROPDOWN_MULTI_SELECT_CLASS } from "./constants.js";
-/* empty css                               */import { EMPTY_ARRAY } from "../../../../utils/common/constants.js";
-const Select = ({
-  className,
-  classNameModifiers = EMPTY_ARRAY,
-  popoverClassNameModifiers,
-  items = EMPTY_ARRAY,
-  filterable = false,
-  multiSelect = false,
-  readonly = false,
-  onChange = noop,
-  selected,
-  name,
-  isInvalid,
-  isValid,
-  placeholder,
-  uniqueId,
-  renderListItem,
-  isCollatingErrors,
-  setToTargetWidth,
-  withoutCollapseIndicator = false,
-  showOverlay = false,
-  fitPosition
+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 { noop as Ae } from "../../../../utils/common/index.js";
+import be from "../../../../utils/uuid.js";
+import ge from "./components/SelectButton.js";
+import Ee from "./components/SelectList.js";
+import Se from "./hooks/useSelect.js";
+import { DROPDOWN_BASE_CLASS as K, DROPDOWN_MULTI_SELECT_CLASS as Re } from "./constants.js";
+import "./Select.scss.js";
+import he from "../../../../hooks/useCommitAction/useCommitAction.js";
+import { CommitAction as U } from "../../../../hooks/useCommitAction/types.js";
+import { EMPTY_ARRAY as Y } from "../../../../utils/common/constants.js";
+const De = ({
+  className: P,
+  classNameModifiers: _ = Y,
+  popoverClassNameModifiers: M,
+  items: g = Y,
+  filterable: u = !1,
+  multiSelect: m = !1,
+  readonly: j = !1,
+  onChange: F = Ae,
+  selected: H,
+  name: O,
+  isInvalid: X,
+  isValid: z,
+  placeholder: G,
+  uniqueId: h,
+  renderListItem: J,
+  isCollatingErrors: Q,
+  setToTargetWidth: V,
+  withoutCollapseIndicator: Z = !1,
+  showOverlay: q = !1,
+  fitPosition: ee
 }) => {
-  const { resetSelection, select, selection } = useSelect({ items, multiSelect, selected });
-  const [showList, setShowList] = h(false);
-  const [textFilter, setTextFilter] = h("");
-  const filterInputRef = _(null);
-  const selectListRef = _(null);
-  const toggleButtonRef = _(null);
-  const selectListId = _(`select-${uuidv4()}`);
-  const [appliedFilterNumber, setAppliedFilterNumber] = h(0);
-  const autoFocusAnimFrame = _();
-  const pendingClickOutsideTriggeredHideList = _(true);
-  const clearSelectionInProgress = _(false);
-  const cachedSelectedItems = _(selection);
-  const selectedItems = _(selection);
-  const dismissPopover = T(() => {
-    setTextFilter("");
-    setShowList(false);
-    if (showList) {
-      resetSelection(cachedSelectedItems.current);
-      pendingClickOutsideTriggeredHideList.current = true;
-    }
-  }, [resetSelection, setShowList, setTextFilter, showList]);
-  const dropdownClassName = F(
-    () => cx([
-      DROPDOWN_BASE_CLASS,
-      { [DROPDOWN_MULTI_SELECT_CLASS]: multiSelect === true },
-      ...classNameModifiers.map((mod) => `${DROPDOWN_BASE_CLASS}--${mod}`),
-      className
+  const { resetSelection: f, select: v, selection: n } = Se({ items: g, multiSelect: m, selected: H }), [o, i] = w(!1), [D, d] = w(""), E = a(null), p = a(null), k = a(null), I = a(`select-${be()}`), [te, B] = w(0), x = a(), S = a(!0), C = a(!1), L = a(n), N = a(n), re = l(() => {
+    d(""), i(!1), o && (f(L.current), S.current = !0);
+  }, [f, i, d, o]), se = de(
+    () => fe([
+      K,
+      { [Re]: m === !0 },
+      ..._.map((e) => `${K}--${e}`),
+      P
     ]),
-    [className, classNameModifiers, multiSelect]
-  );
-  const { commitAction, commitActionButtons, committing, resetCommitAction } = useCommitAction({
-    resetDisabled: !selection.length
-  });
-  const closeList = T(() => {
-    var _a;
-    setTextFilter("");
-    setShowList(false);
-    resetCommitAction();
-    if (!pendingClickOutsideTriggeredHideList.current) {
-      (_a = toggleButtonRef.current) == null ? void 0 : _a.focus();
-    } else
-      pendingClickOutsideTriggeredHideList.current = false;
-  }, [resetCommitAction, setShowList, setTextFilter]);
-  const commitSelection = T(() => {
-    cachedSelectedItems.current = selection;
-    const value = `${selection.map(({ id }) => id)}`;
-    onChange({ target: { value, name } });
-  }, [name, onChange, selection]);
-  p(() => {
-    switch (commitAction) {
-      case CommitAction.APPLY:
-        commitSelection();
+    [P, _, m]
+  ), { commitAction: y, commitActionButtons: ne, committing: W, resetCommitAction: $ } = he({
+    resetDisabled: !n.length
+  }), c = l(() => {
+    var e;
+    d(""), i(!1), $(), S.current ? S.current = !1 : (e = k.current) == null || e.focus();
+  }, [$, i, d]), R = l(() => {
+    L.current = n;
+    const e = `${n.map(({ id: t }) => t)}`;
+    F({ target: { value: e, name: O } });
+  }, [O, F, n]);
+  b(() => {
+    switch (y) {
+      case U.APPLY:
+        R();
         break;
-      case CommitAction.CLEAR:
-        resetSelection();
-        clearSelectionInProgress.current = true;
+      case U.CLEAR:
+        f(), C.current = !0;
         break;
     }
-  }, [commitAction, commitSelection, resetSelection]);
-  const handleSelect = T(
+  }, [y, R, f]);
+  const A = l(
     (e) => {
-      var _a;
+      var r;
       e.preventDefault();
-      const target = e.currentTarget && ((_a = selectListRef == null ? void 0 : selectListRef.current) == null ? void 0 : _a.contains(e.currentTarget)) ? e.currentTarget : null;
-      if (target && !target.getAttribute("data-disabled")) {
-        const value = target.getAttribute("data-value");
-        const item = items.find((item2) => item2.id === value);
-        select(item);
+      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);
+        v(ue);
       }
     },
-    [items, select]
+    [g, v]
   );
-  p(() => {
-    if (selectedItems.current !== selection) {
-      selectedItems.current = selection;
-      if (!multiSelect || clearSelectionInProgress.current) {
-        commitSelection();
-        closeList();
-      }
-    }
-    clearSelectionInProgress.current = false;
-  }, [closeList, commitSelection, multiSelect, selection]);
-  p(() => {
-    if (committing) {
-      setAppliedFilterNumber(selection.length);
-      closeList();
-    }
-  }, [committing, closeList, setAppliedFilterNumber, selection.length]);
-  const handleButtonKeyDown = T(
-    (evt) => {
-      switch (evt.code) {
-        case InteractionKeyCode.ESCAPE:
-        case InteractionKeyCode.TAB:
-          showList && closeList();
-          pendingClickOutsideTriggeredHideList.current = evt.key === InteractionKeyCode.TAB;
+  b(() => {
+    N.current !== n && (N.current = n, (!m || C.current) && (R(), c())), C.current = !1;
+  }, [c, R, 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(), S.current = e.key === s.TAB;
           return;
-        case InteractionKeyCode.ENTER:
-        case InteractionKeyCode.SPACE:
-          if (filterable && showList) {
-            if (evt.key === InteractionKeyCode.ENTER) {
-              if (textFilter)
-                handleSelect(evt);
+        case s.ENTER:
+        case s.SPACE:
+          if (u && o) {
+            if (e.key === s.ENTER)
+              if (D)
+                A(e);
               else
                 break;
-            }
             return;
           }
           break;
-        case InteractionKeyCode.ARROW_DOWN:
-        case InteractionKeyCode.ARROW_UP:
+        case s.ARROW_DOWN:
+        case s.ARROW_UP:
           break;
         default:
           return;
       }
-      evt.preventDefault();
-      setShowList(true);
+      e.preventDefault(), i(!0);
     },
-    [closeList, filterable, handleSelect, showList, setShowList, textFilter]
+    [c, u, A, o, i, D]
   );
-  p(() => {
-    if (showList) {
-      cancelAnimationFrame(autoFocusAnimFrame.current);
-      autoFocusAnimFrame.current = requestAnimationFrame(() => {
-        var _a;
-        focus: {
-          let item = (_a = selectListRef.current) == null ? void 0 : _a.firstElementChild;
-          let firstAvailableItem;
-          while (item) {
-            if (!(item.dataset.disabled && item.dataset.disabled === "true")) {
-              if (item.getAttribute("aria-selected") === "true") {
-                item.focus();
-                break focus;
-              }
-              firstAvailableItem = firstAvailableItem || item;
+  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;
             }
-            item = item.nextElementSibling;
+            r = r || t;
           }
-          if (firstAvailableItem)
-            firstAvailableItem.focus();
+          t = t.nextElementSibling;
         }
-      });
-    }
-  }, [showList]);
-  const handleListKeyDown = T(
-    (evt) => {
-      const target = evt.target;
-      switch (evt.code) {
-        case InteractionKeyCode.ESCAPE:
-          evt.preventDefault();
-          closeList();
+        r && r.focus();
+      }
+    }));
+  }, [o]);
+  const ce = l(
+    (e) => {
+      const t = e.target;
+      switch (e.code) {
+        case s.ESCAPE:
+          e.preventDefault(), c();
           break;
-        case InteractionKeyCode.ENTER:
-        case InteractionKeyCode.SPACE:
-          handleSelect(evt);
+        case s.ENTER:
+        case s.SPACE:
+          A(e);
           break;
-        case InteractionKeyCode.ARROW_DOWN: {
-          evt.preventDefault();
-          let item = target.nextElementSibling;
-          while (item) {
-            if (!(item.dataset.disabled && item.dataset.disabled === "true")) {
-              item.focus();
+        case s.ARROW_DOWN: {
+          e.preventDefault();
+          let r = t.nextElementSibling;
+          for (; r; ) {
+            if (!(r.dataset.disabled && r.dataset.disabled === "true")) {
+              r.focus();
               break;
             }
-            item = item.nextElementSibling;
+            r = r.nextElementSibling;
           }
           break;
         }
-        case InteractionKeyCode.ARROW_UP: {
-          evt.preventDefault();
-          focus: {
-            let item = target.previousElementSibling;
-            while (item) {
-              if (!(item.dataset.disabled && item.dataset.disabled === "true")) {
-                item.focus();
-                break focus;
+        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;
               }
-              item = item.previousElementSibling;
-            }
-            if (filterable && filterInputRef.current) {
-              filterInputRef.current.focus();
+              r = r.previousElementSibling;
             }
+            u && E.current && E.current.focus();
           }
           break;
         }
-        case InteractionKeyCode.TAB:
-          closeList();
+        case s.TAB:
+          c();
           break;
       }
     },
-    [closeList, filterable, handleSelect]
-  );
-  const handleTextFilter = T(
+    [c, u, A]
+  ), ae = l(
     (e) => {
-      const value = e.target.value;
-      setTextFilter(value.toLowerCase());
+      const t = e.target.value;
+      d(t.toLowerCase());
     },
-    [setTextFilter]
-  );
-  const toggleList = T(
+    [d]
+  ), ie = l(
     (e) => {
-      e.preventDefault();
-      setShowList((showList2) => !showList2);
-      showList && resetSelection(cachedSelectedItems.current);
+      e.preventDefault(), i((t) => !t), o && f(L.current);
     },
-    [setShowList, showList, resetSelection]
+    [i, o, f]
   );
-  p(() => {
-    var _a;
-    if (showList && filterable) {
-      (_a = filterInputRef.current) == null ? void 0 : _a.focus();
-    }
-  }, [filterable, showList]);
-  return /* @__PURE__ */ o("div", { className: dropdownClassName, children: [
-    /* @__PURE__ */ o(
-      SelectButton,
+  return b(() => {
+    var e;
+    o && u && ((e = E.current) == null || e.focus());
+  }, [u, o]), /* @__PURE__ */ T("div", { className: se, children: [
+    /* @__PURE__ */ T(
+      ge,
       {
-        id: uniqueId ?? void 0,
-        appliedFilterNumber,
-        active: selection,
-        filterInputRef,
-        filterable,
-        isInvalid,
-        isValid,
-        onButtonKeyDown: handleButtonKeyDown,
-        onInput: handleTextFilter,
-        multiSelect,
-        placeholder,
-        readonly,
-        selectListId: selectListId.current,
-        showList,
-        toggleButtonRef,
-        toggleList,
-        withoutCollapseIndicator,
-        ariaDescribedBy: !isCollatingErrors && uniqueId ? `${uniqueId}${ARIA_ERROR_SUFFIX}` : ""
+        id: h ?? void 0,
+        appliedFilterNumber: te,
+        active: n,
+        filterInputRef: E,
+        filterable: u,
+        isInvalid: X,
+        isValid: z,
+        onButtonKeyDown: oe,
+        onInput: ae,
+        multiSelect: m,
+        placeholder: G,
+        readonly: j,
+        selectListId: I.current,
+        showList: o,
+        toggleButtonRef: k,
+        toggleList: ie,
+        withoutCollapseIndicator: Z,
+        ariaDescribedBy: !Q && h ? `${h}${pe}` : ""
       }
     ),
-    /* @__PURE__ */ o(
-      SelectList,
+    /* @__PURE__ */ T(
+      Ee,
       {
-        popoverClassNameModifiers,
-        setToTargetWidth,
-        dismissPopover,
-        active: selection,
-        commitActions: commitActionButtons,
-        items,
-        multiSelect,
-        onKeyDown: handleListKeyDown,
-        onSelect: handleSelect,
-        selectListId: selectListId.current,
-        ref: selectListRef,
-        toggleButtonRef,
-        renderListItem,
-        showList,
-        showOverlay,
-        textFilter,
-        fitPosition
+        popoverClassNameModifiers: M,
+        setToTargetWidth: V,
+        dismissPopover: re,
+        active: n,
+        commitActions: ne,
+        items: g,
+        multiSelect: m,
+        onKeyDown: ce,
+        onSelect: A,
+        selectListId: I.current,
+        ref: p,
+        toggleButtonRef: k,
+        renderListItem: J,
+        showList: o,
+        showOverlay: q,
+        textFilter: D,
+        fitPosition: ee
       }
     )
   ] });
-};
+}, We = De;
 export {
-  Select as default
+  We as default
 };

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

@@ -0,0 +1,4 @@
+const e = "";
+export {
+  e as default
+};