@prokodo/ui 0.1.14 → 1.0.0

package/dist/components/select/Select.client.js

@@ -1,21 +1,31 @@
 "use client";
 var __defProp = Object.defineProperty;
 var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { memo, useRef, useState, useEffect, useCallback, useMemo } from "react";
 import { createPortal } from "react-dom";
+import { create } from "../../helpers/bem.js";
+import styles from "./Select.module.scss.js";
 import { SelectView } from "./Select.view.js";
+import { Icon } from "../icon/Icon.js";
+const bem = create(styles, "Select");
 function isMulti(v) {
   return Array.isArray(v);
 }
 __name(isMulti, "isMulti");
 const toDatasetKey = /* @__PURE__ */ __name((k) => k.replace(/-([a-z])/g, (_, c) => c.toUpperCase()), "toDatasetKey");
 function mergeValue(oldVal, newVal, multiple = false) {
-  return multiple ? (() => {
-    const s = new Set(isMulti(oldVal) ? oldVal : []);
-    s.has(newVal) ? s.delete(newVal) : s.add(newVal);
-    return [...s];
-  })() : newVal;
+  return multiple ? (
+    /* istanbul ignore next */
+    (() => {
+      const s = new Set(
+        /* istanbul ignore next */
+        isMulti(oldVal) ? oldVal : []
+      );
+      s.has(newVal) ? s.delete(newVal) : s.add(newVal);
+      return [...s];
+    })()
+  ) : newVal;
 }
 __name(mergeValue, "mergeValue");
 function SelectClient({
@@ -37,6 +47,8 @@ function SelectClient({
   );
   const [popupStyle, setPopupStyle] = useState({});
   const [popupReady, setPopupReady] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const sheetSwipeStart = useRef(null);
   const hasPlaceholder = !Boolean(required) && !Boolean(multiple);
   const optionCount = (hasPlaceholder ? 1 : 0) + items.length;
   useEffect(() => {
@@ -64,7 +76,10 @@ function SelectClient({
   );
   const valueToIndex = useCallback(() => {
     if (!Boolean(multiple)) {
-      const current = String(val ?? "");
+      const current = String(
+        /* istanbul ignore next */
+        val ?? ""
+      );
       if (hasPlaceholder && current === "") return 0;
       const idx = items.findIndex((x) => String(x.value) === current);
       if (idx >= 0) return idx + (hasPlaceholder ? 1 : 0);
@@ -81,19 +96,23 @@ function SelectClient({
     setPopupReady(false);
     (_a = btnRef == null ? void 0 : btnRef.current) == null ? void 0 : _a.focus();
   }, []);
-  const updatePopupPosition = useCallback(() => {
-    const btn = btnRef.current;
-    if (!btn) return false;
-    const r = btn.getBoundingClientRect();
-    setPopupStyle({
-      position: "fixed",
-      left: r.left,
-      top: r.bottom,
-      width: r.width,
-      zIndex: 2147483647
-    });
-    return true;
-  }, []);
+  const updatePopupPosition = useCallback(
+    /* istanbul ignore next */
+    () => {
+      const btn = btnRef.current;
+      if (!btn) return false;
+      const r = btn.getBoundingClientRect();
+      setPopupStyle({
+        position: "fixed",
+        left: r.left,
+        top: r.bottom,
+        width: r.width,
+        zIndex: 2147483647
+      });
+      return true;
+    },
+    []
+  );
   useEffect(() => {
     if (!open || !popupReady) return;
     setActiveIndex(valueToIndex());
@@ -142,54 +161,77 @@ function SelectClient({
     window.addEventListener("click", handleOutside);
     return () => window.removeEventListener("click", handleOutside);
   }, [open, close]);
-  const handleKey = /* @__PURE__ */ __name((e) => {
-    var _a, _b;
-    if (Boolean(disabled)) return;
-    if (e.key === "Escape") {
-      e.preventDefault();
-      close();
-      return;
-    }
-    if (e.key === "ArrowDown") {
-      e.preventDefault();
-      if (!open) {
-        openWithPosition();
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 480px)");
+    setIsMobile(mq.matches);
+    const handler = /* @__PURE__ */ __name((e) => setIsMobile(e.matches), "handler");
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  const handleKey = (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name((e) => {
+      var _a, _b;
+      if (Boolean(disabled)) return;
+      if (e.key === "Escape") {
+        e.preventDefault();
+        close();
         return;
       }
-      setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
-      (_a = listRef.current) == null ? void 0 : _a.focus();
-      return;
-    }
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      if (!open) {
-        openWithPosition();
+      if (e.key === "ArrowDown") {
+        e.preventDefault();
+        if (!open) {
+          openWithPosition();
+          return;
+        }
+        setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
+        (_a = listRef.current) == null ? void 0 : _a.focus();
         return;
       }
-      setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
-      (_b = listRef.current) == null ? void 0 : _b.focus();
-    }
-  }, "handleKey");
-  const dataset = useMemo(() => {
-    const d = {};
-    for (const [k, v] of Object.entries(rest)) {
-      if (k.startsWith("data-")) d[toDatasetKey(k.slice(5))] = v;
-    }
-    return d;
-  }, [rest]);
-  const clickOption = /* @__PURE__ */ __name((opt) => {
-    const newVal = opt === null ? Boolean(multiple) ? [] : "" : mergeValue(val, opt, multiple);
-    const syntheticEvt = { target: { dataset } };
-    setVal(newVal);
-    onChange == null ? void 0 : onChange(syntheticEvt, newVal);
-    if (!Boolean(multiple)) close();
-  }, "clickOption");
-  const onOptionKeyDown = /* @__PURE__ */ __name((e, v) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      clickOption(v);
-    }
-  }, "onOptionKeyDown");
+      if (e.key === "ArrowUp") {
+        e.preventDefault();
+        if (!open) {
+          openWithPosition();
+          return;
+        }
+        setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
+        (_b = listRef.current) == null ? void 0 : _b.focus();
+      }
+    }, "handleKey")
+  );
+  const dataset = useMemo(
+    /* istanbul ignore next */
+    () => {
+      const d = {};
+      for (const [k, v] of Object.entries(rest)) {
+        if (k.startsWith("data-")) d[toDatasetKey(k.slice(5))] = v;
+      }
+      return d;
+    },
+    [rest]
+  );
+  const clickOption = (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name((opt) => {
+      const newVal = opt === null ? (
+        /* istanbul ignore next */
+        Boolean(multiple) ? [] : ""
+      ) : mergeValue(val, opt, multiple);
+      const syntheticEvt = { target: { dataset } };
+      setVal(newVal);
+      onChange == null ? void 0 : onChange(syntheticEvt, newVal);
+      if (!Boolean(multiple)) close();
+    }, "clickOption")
+  );
+  const onOptionKeyDown = (
+    /* istanbul ignore next */
+    /* @__PURE__ */ __name((e, v) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        clickOption(v);
+      }
+    }, "onOptionKeyDown")
+  );
   return /* @__PURE__ */ jsx(
     SelectView,
     {
@@ -211,38 +253,181 @@ function SelectClient({
           if (!args.open) return null;
           if (!popupReady) return null;
           if (typeof document === "undefined") return null;
-          const onListKeyDown = /* @__PURE__ */ __name((e) => {
-            if (e.key === "Escape") {
-              e.preventDefault();
-              close();
-              return;
-            }
-            if (e.key === "ArrowDown") {
-              e.preventDefault();
-              setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
-              return;
-            }
-            if (e.key === "ArrowUp") {
-              e.preventDefault();
-              setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
-              return;
-            }
-            if (e.key === "Home") {
-              e.preventDefault();
-              setActiveIndex(optionCount > 0 ? 0 : -1);
-              return;
-            }
-            if (e.key === "End") {
-              e.preventDefault();
-              setActiveIndex(optionCount > 0 ? optionCount - 1 : -1);
-              return;
-            }
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              const v = indexToValue(activeIndex);
-              clickOption(v);
-            }
-          }, "onListKeyDown");
+          const onListKeyDown = (
+            /* istanbul ignore next */
+            /* @__PURE__ */ __name((e) => {
+              if (e.key === "Escape") {
+                e.preventDefault();
+                close();
+                return;
+              }
+              if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) + 1));
+                return;
+              }
+              if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActiveIndex((i) => clampIndex((i < 0 ? valueToIndex() : i) - 1));
+                return;
+              }
+              if (e.key === "Home") {
+                e.preventDefault();
+                setActiveIndex(optionCount > 0 ? 0 : -1);
+                return;
+              }
+              if (e.key === "End") {
+                e.preventDefault();
+                setActiveIndex(optionCount > 0 ? optionCount - 1 : -1);
+                return;
+              }
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                const v = indexToValue(activeIndex);
+                clickOption(v);
+              }
+            }, "onListKeyDown")
+          );
+          if (isMobile) {
+            const sheetVariant = rest.color ?? "primary";
+            const handleSheetTouchStart = /* @__PURE__ */ __name((e) => {
+              var _a;
+              sheetSwipeStart.current = ((_a = e.touches[0]) == null ? void 0 : _a.clientY) ?? null;
+            }, "handleSheetTouchStart");
+            const handleSheetTouchEnd = /* @__PURE__ */ __name((e) => {
+              var _a;
+              const startY = sheetSwipeStart.current;
+              sheetSwipeStart.current = null;
+              if (startY === null) return;
+              const dy = (((_a = e.changedTouches[0]) == null ? void 0 : _a.clientY) ?? startY) - startY;
+              if (dy > 60) close();
+            }, "handleSheetTouchEnd");
+            const sheet = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "aria-hidden": "true",
+                  className: bem("sheet__backdrop"),
+                  onClick: close
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-label": rest.label,
+                  "aria-modal": "true",
+                  className: bem("sheet", { [sheetVariant]: true }),
+                  role: "dialog",
+                  onTouchEnd: handleSheetTouchEnd,
+                  onTouchStart: handleSheetTouchStart,
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { className: bem("sheet__header"), children: [
+                      /* @__PURE__ */ jsx("span", { className: bem("sheet__title"), children: rest.label }),
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          "aria-label": "Close",
+                          className: bem("sheet__close"),
+                          type: "button",
+                          onClick: close,
+                          children: /* @__PURE__ */ jsx(Icon, { name: "Cancel01Icon", size: "sm" })
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs(
+                      "ul",
+                      {
+                        ref: listRef,
+                        "aria-multiselectable": Boolean(args.multiple) || void 0,
+                        className: bem("sheet__list"),
+                        id: args.id,
+                        role: "listbox",
+                        tabIndex: 0,
+                        "aria-activedescendant": activeIndex >= 0 ? `${args.id}-opt-${activeIndex}` : void 0,
+                        onKeyDown: onListKeyDown,
+                        children: [
+                          !Boolean(args.required) && !Boolean(args.multiple) && /* @__PURE__ */ jsx(
+                            "li",
+                            {
+                              id: `${args.id}-opt-0`,
+                              role: "option",
+                              tabIndex: -1,
+                              "aria-selected": (
+                                /* istanbul ignore next */
+                                Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                              ),
+                              className: bem("sheet__item", {
+                                selected: (
+                                  /* istanbul ignore next */
+                                  Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                                ),
+                                active: activeIndex === 0
+                              }),
+                              onClick: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick")
+                              ),
+                              onKeyDown: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown")
+                              ),
+                              onMouseMove: (
+                                /* istanbul ignore next */
+                                /* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove")
+                              ),
+                              children: args.placeholder
+                            },
+                            "placeholder"
+                          ),
+                          args.items.map((opt) => {
+                            var _a;
+                            const hasPh = !Boolean(args.required) && !Boolean(args.multiple);
+                            const idx = args.items.findIndex(
+                              (x) => x.value === opt.value
+                            );
+                            const index = idx + (hasPh ? 1 : 0);
+                            const selected = Array.isArray(args.value) ? args.value.includes(opt.value) : opt.value === args.value;
+                            return /* @__PURE__ */ jsxs(
+                              "li",
+                              {
+                                "aria-selected": selected,
+                                id: `${args.id}-opt-${index}`,
+                                role: "option",
+                                tabIndex: -1,
+                                className: bem("sheet__item", {
+                                  selected,
+                                  active: activeIndex === index
+                                }),
+                                onClick: /* @__PURE__ */ __name(() => args.onOptionClick(opt.value), "onClick"),
+                                onMouseMove: /* @__PURE__ */ __name(() => setActiveIndex(index), "onMouseMove"),
+                                onKeyDown: /* @__PURE__ */ __name((e) => onOptionKeyDown(e, opt.value), "onKeyDown"),
+                                children: [
+                                  Boolean(args.iconVisible) && /* istanbul ignore next */
+                                  ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
+                                  opt.label
+                                ]
+                              },
+                              `${args.id}-${opt.value}`
+                            );
+                          })
+                        ]
+                      }
+                    ),
+                    Boolean(args.multiple) && /* @__PURE__ */ jsx("div", { className: bem("sheet__footer"), children: /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        className: bem("sheet__done"),
+                        type: "button",
+                        onClick: close,
+                        children: "Done"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ] });
+            return createPortal(sheet, document.body);
+          }
           const listbox = /* @__PURE__ */ jsxs(
             "ul",
             {
@@ -262,14 +447,29 @@ function SelectClient({
                     id: `${args.id}-opt-0`,
                     role: "option",
                     tabIndex: -1,
-                    "aria-selected": Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === "",
+                    "aria-selected": (
+                      /* istanbul ignore next */
+                      Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                    ),
                     className: args.bemItem({
-                      selected: Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === "",
+                      selected: (
+                        /* istanbul ignore next */
+                        Array.isArray(args.value) ? args.value.length === 0 : String(args.value ?? "") === ""
+                      ),
                       active: activeIndex === 0
                     }),
-                    onClick: /* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick"),
-                    onKeyDown: /* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown"),
-                    onMouseMove: /* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove"),
+                    onClick: (
+                      /* istanbul ignore next */
+                      /* @__PURE__ */ __name(() => args.onOptionClick(null), "onClick")
+                    ),
+                    onKeyDown: (
+                      /* istanbul ignore next */
+                      /* @__PURE__ */ __name((e) => onOptionKeyDown(e, null), "onKeyDown")
+                    ),
+                    onMouseMove: (
+                      /* istanbul ignore next */
+                      /* @__PURE__ */ __name(() => setActiveIndex(0), "onMouseMove")
+                    ),
                     children: args.placeholder
                   },
                   "placeholder"
@@ -305,7 +505,8 @@ function SelectClient({
                             type: "checkbox"
                           }
                         ),
-                        Boolean(args.iconVisible) && ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
+                        Boolean(args.iconVisible) && /* istanbul ignore next */
+                        ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
                         opt.label
                       ]
                     },