urfu-ui-kit-react 2.1.7-next.4 → 2.1.7-next.5

package/dist/components/Select/MobileOptionSheet.js

@@ -1,56 +1,57 @@
-import { jsxs as _, jsx as t, Fragment as I } from "react/jsx-runtime";
-import { useState as x, useEffect as D, useMemo as O } from "react";
-import { useAutoId$u as f } from "../../hooks/useAutoId.js";
+import { jsxs as _, jsx as t, Fragment as C } from "react/jsx-runtime";
+import { useState as D, useEffect as K, useMemo as w } from "react";
+import { useAutoId$u as b } from "../../hooks/useAutoId.js";
 import { getOptionKeys$u as B } from "../../shared/optionValue.js";
-import { Button$u as C } from "../Button/Button.js";
-import { Checkbox$u as E } from "../Checkbox/Checkbox.js";
-import { Icon$u as g } from "../Icon/Icon.js";
-import { Modal$u as K } from "../Modal/Modal.js";
-import { Search$u as M } from "../Search/Search.js";
+import { Button$u as E } from "../Button/Button.js";
+import { Checkbox$u as M } from "../Checkbox/Checkbox.js";
+import { Icon$u as O } from "../Icon/Icon.js";
+import { Modal$u as S } from "../Modal/Modal.js";
+import { Search$u as T } from "../Search/Search.js";
 /* empty css                                                 */
-const S = 8, T = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]), W = /* @__PURE__ */ new Set(["ArrowUp", "ArrowLeft"]), j = (o, m) => {
-  var c;
+import { kitCls$u as r, getUiKitPrefix$u as A } from "../../shared/uiKitDefaults.js";
+const W = 8, $ = /* @__PURE__ */ new Set(["ArrowDown", "ArrowRight"]), j = /* @__PURE__ */ new Set(["ArrowUp", "ArrowLeft"]), q = (o, p) => {
+  var n;
   if (o.key === "Enter") {
-    o.preventDefault(), m();
+    o.preventDefault(), p();
     return;
   }
-  const r = T.has(o.key);
-  if (!r && !W.has(o.key)) return;
+  const s = $.has(o.key);
+  if (!s && !j.has(o.key)) return;
   o.preventDefault();
-  const s = o.currentTarget.closest('[role="radiogroup"]'), l = [...(s == null ? void 0 : s.querySelectorAll('input[type="radio"]')) ?? []], a = l.indexOf(o.currentTarget);
-  (c = l[(a + (r ? 1 : -1) + l.length) % l.length]) == null || c.focus();
+  const l = o.currentTarget.closest('[role="radiogroup"]'), i = [...(l == null ? void 0 : l.querySelectorAll('input[type="radio"]')) ?? []], c = i.indexOf(o.currentTarget);
+  (n = i[(c + (s ? 1 : -1) + i.length) % i.length]) == null || n.focus();
 };
-function X({
+function ee({
   active: o,
-  title: m,
-  options: r,
-  multiple: s = !1,
-  isSelected: l,
-  onSelect: a,
-  onClose: c,
-  searchable: k = !1,
-  onSearchChange: i,
-  loading: A = !1
+  title: p,
+  options: s,
+  multiple: l = !1,
+  isSelected: i,
+  onSelect: c,
+  onClose: n,
+  searchable: R = !1,
+  onSearchChange: a,
+  loading: v = !1
 }) {
-  const p = f(void 0, "u-option-sheet-title"), R = f(void 0, "u-option-sheet"), b = f(void 0, "u-option-sheet-search"), [n, y] = x(""), v = k || r.length > S;
-  D(() => {
-    o && y("");
+  const f = b(void 0, r("option-sheet-title")), L = b(void 0, r("option-sheet")), y = b(void 0, r("option-sheet-search")), [d, N] = D(""), x = R || s.length > W;
+  K(() => {
+    o && N("");
   }, [o]);
-  const u = O(() => {
-    const e = n.trim().toLowerCase();
-    return e ? r.filter((d) => (d.label ?? "").toLowerCase().includes(e)) : r;
-  }, [r, n]), N = O(() => B(u), [u]), L = (e) => {
-    y(e.target.value), i == null || i(e.target.value);
-  }, w = () => {
-    n && (i == null || i("")), c();
+  const m = w(() => {
+    const e = d.trim().toLowerCase();
+    return e ? s.filter((u) => (u.label ?? "").toLowerCase().includes(e)) : s;
+  }, [s, d]), g = w(() => B(m), [m]), F = (e) => {
+    N(e.target.value), a == null || a(e.target.value);
+  }, k = () => {
+    d && (a == null || a("")), n();
   };
   return /* @__PURE__ */ _(
-    K,
+    S,
     {
       active: o,
-      onCancel: w,
-      ariaLabelledBy: p,
-      className: "u-react-option-sheet",
+      onCancel: k,
+      ariaLabelledBy: f,
+      className: r("react-option-sheet"),
       mobileSheet: !0,
       initialFocus: "dialog",
       closeOnEscape: !0,
@@ -58,59 +59,59 @@ function X({
       lockScroll: !0,
       unmountOnClose: !0,
       children: [
-        /* @__PURE__ */ t("h2", { id: p, className: "u-react-option-sheet__title", children: m }),
-        v ? /* @__PURE__ */ _(I, { children: [
-          /* @__PURE__ */ t("label", { className: "u-react-option-sheet__sr-only", htmlFor: b, children: "Поиск по вариантам" }),
+        /* @__PURE__ */ t("h2", { id: f, className: r("react-option-sheet__title"), children: p }),
+        x ? /* @__PURE__ */ _(C, { children: [
+          /* @__PURE__ */ t("label", { className: r("react-option-sheet__sr-only"), htmlFor: y, children: "Поиск по вариантам" }),
           /* @__PURE__ */ t(
-            M,
+            T,
             {
-              id: b,
-              className: "u-react-option-sheet__search",
+              id: y,
+              className: r("react-option-sheet__search"),
               placeholder: "Поиск",
-              value: n,
-              onChange: L
+              value: d,
+              onChange: F
             }
           )
         ] }) : null,
         /* @__PURE__ */ t(
           "div",
           {
-            className: "u-react-option-sheet__list",
-            role: s ? "group" : "radiogroup",
-            "aria-labelledby": p,
-            children: A ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__empty", children: "Загрузка…" }) : u.length === 0 ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__empty", children: "Ничего не найдено" }) : u.map((e, d) => {
-              const h = l(e);
-              return s ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__option", children: /* @__PURE__ */ t(E, { checked: h, onChange: () => a(e), children: e.label }) }, N[d]) : /* @__PURE__ */ _(
+            className: r("react-option-sheet__list"),
+            role: l ? "group" : "radiogroup",
+            "aria-labelledby": f,
+            children: v ? /* @__PURE__ */ t("div", { className: r("react-option-sheet__empty"), children: "Загрузка…" }) : m.length === 0 ? /* @__PURE__ */ t("div", { className: r("react-option-sheet__empty"), children: "Ничего не найдено" }) : m.map((e, u) => {
+              const h = i(e);
+              return l ? /* @__PURE__ */ t("div", { className: r("react-option-sheet__option"), children: /* @__PURE__ */ t(M, { checked: h, onChange: () => c(e), children: e.label }) }, g[u]) : /* @__PURE__ */ _(
                 "label",
                 {
-                  className: `u-react-option-sheet__option u-react-option-sheet__option--single${h ? " is-selected" : ""}`,
+                  className: `${A()}-react-option-sheet__option ${A()}-react-option-sheet__option--single${h ? " is-selected" : ""}`,
                   children: [
                     /* @__PURE__ */ t(
                       "input",
                       {
-                        className: "u-react-option-sheet__sr-only",
+                        className: r("react-option-sheet__sr-only"),
                         type: "radio",
-                        name: R,
+                        name: L,
                         checked: h,
                         onChange: () => {
                         },
-                        onClick: () => a(e),
-                        onKeyDown: (F) => j(F, () => a(e))
+                        onClick: () => c(e),
+                        onKeyDown: (I) => q(I, () => c(e))
                       }
                     ),
-                    /* @__PURE__ */ t("span", { className: "u-react-option-sheet__label", children: e.label }),
-                    e.icon ? /* @__PURE__ */ t("span", { role: e.iconLabel ? "img" : void 0, "aria-label": e.iconLabel, "aria-hidden": e.iconLabel ? void 0 : !0, children: /* @__PURE__ */ t(g, { name: e.icon, size: 16 }) }) : null,
-                    h ? /* @__PURE__ */ t("span", { className: "u-react-option-sheet__check", "aria-hidden": !0, children: /* @__PURE__ */ t(g, { name: "check", size: 20 }) }) : null
+                    /* @__PURE__ */ t("span", { className: r("react-option-sheet__label"), children: e.label }),
+                    e.icon ? /* @__PURE__ */ t("span", { role: e.iconLabel ? "img" : void 0, "aria-label": e.iconLabel, "aria-hidden": e.iconLabel ? void 0 : !0, children: /* @__PURE__ */ t(O, { name: e.icon, size: 16 }) }) : null,
+                    h ? /* @__PURE__ */ t("span", { className: r("react-option-sheet__check"), "aria-hidden": !0, children: /* @__PURE__ */ t(O, { name: "check", size: 20 }) }) : null
                   ]
                 },
-                N[d]
+                g[u]
               );
             })
           }
         ),
-        s ? /* @__PURE__ */ t("div", { className: "u-react-option-sheet__footer", children: /* @__PURE__ */ t(C, { type: "button", onClick: w, children: "Готово" }) }) : null
+        l ? /* @__PURE__ */ t("div", { className: r("react-option-sheet__footer"), children: /* @__PURE__ */ t(E, { type: "button", onClick: k, children: "Готово" }) }) : null
       ]
     }
   );
 }
-export { X as MobileOptionSheet$u };
+export { ee as MobileOptionSheet$u };