@adyen/adyen-platform-experience-web 0.1.2 → 1.0.0-beta.1

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

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