@sberbusiness/triplex-next 0.14.1 → 0.16.0

package/components/SuggestField/desktop/SuggestFieldDesktop.js

@@ -1,27 +1,29 @@
-import { SuggestFieldDesktopDropdown as gt } from "./SuggestFieldDesktopDropdown.js";
-import { jsxs as q, jsx as g } from "react/jsx-runtime";
-import { useState as f, useRef as k, useCallback as s, useEffect as E } from "react";
-import { a as ft, A as ht, c as Dt } from "../../../chunks/vendor-CalMVkfj.js";
-import { Tooltip as x } from "../../Tooltip/Tooltip.js";
-import { ETooltipSize as bt } from "../../Tooltip/enums.js";
-import { SuggestFieldTarget as ut } from "../SuggestFieldTarget.js";
+import { SuggestFieldDesktopDropdown as dt } from "./SuggestFieldDesktopDropdown.js";
+import { jsxs as w, jsx as n } from "react/jsx-runtime";
+import lt, { useState as u, useRef as b, useCallback as s, useEffect as x } from "react";
+import { EComponentSize as ct } from "../../../enums/EComponentSize.js";
+import { Tooltip as R } from "../../Tooltip/Tooltip.js";
+import { ETooltipSize as pt } from "../../Tooltip/enums.js";
+import { TextFieldBase as at } from "../../TextField/TextFieldBase.js";
 import "../../FormField/FormField.js";
 import "../../FormField/components/FormFieldDescription.js";
 import "../../FormField/components/FormFieldCounter.js";
 import "../../FormField/components/FormFieldLabel.js";
-import "../../FormField/components/FormFieldClear.js";
+import { FormFieldClear as ft } from "../../FormField/components/FormFieldClear.js";
 import "../../FormField/components/FormFieldTarget.js";
-import "../../../chunks/FormFieldInput-CXE2lpa2.js";
+import { F as gt } from "../../../chunks/FormFieldInput-DDUEO0k6.js";
 import "../../FormField/components/FormFieldMaskedInput.js";
 import "../../FormField/components/FormFieldPostfix.js";
 import "../../FormField/components/FormFieldPrefix.js";
 import "../../FormField/components/FormFieldTextarea.js";
-import { EFormFieldStatus as St } from "../../FormField/enums.js";
-import "../../Dropdown/Dropdown.js";
-import { DropdownListContext as kt } from "../../Dropdown/DropdownListContext.js";
+import { EFormFieldStatus as T } from "../../FormField/enums.js";
+import { LoaderSmall as ht } from "../../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme as ut } from "../../Loader/LoaderSmall/enum.js";
+import "../../Loader/LoaderMiddle/LoaderMiddle.js";
+import { DropdownListContext as bt } from "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
 import "../../Dropdown/desktop/DropdownList.js";
-import "../../../chunks/DropdownListItem-BByGOD7_.js";
+import "../../../chunks/DropdownListItem-BdSacGyt.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -31,167 +33,164 @@ import "../../Dropdown/mobile/DropdownMobileInner.js";
 import "../../Dropdown/mobile/DropdownMobileInput.js";
 import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
-import "../../Loader/LoaderSmall/LoaderSmall.js";
-import "../../Loader/LoaderMiddle/LoaderMiddle.js";
-import { DataTestId as wt } from "../../../consts/DataTestId.js";
-const Lt = "suggestFieldDesktop__4523083c", Ct = {
-  suggestFieldDesktop: Lt
-}, Pt = ({
-  className: z,
-  value: e,
-  options: p,
-  size: y,
+import "../../Dropdown/Dropdown.js";
+import { DataTestId as j } from "../../../consts/DataTestId.js";
+import { u as St, z as Ft } from "../../../chunks/vendor-DE8Zvm0w.js";
+const io = ({
+  value: o,
+  options: m,
+  size: S = ct.LG,
   status: F,
-  label: v,
-  placeholder: B,
-  loading: G,
-  dropdownListLoading: J,
-  tooltipHint: K,
-  tooltipOpen: Q,
-  clearInputOnFocus: A,
-  onSelect: d,
+  placeholder: z,
+  "data-test-id": d,
+  loading: q,
+  dropdownListLoading: G,
+  tooltipHint: J,
+  tooltipOpen: K,
+  clearInputOnFocus: k,
+  onSelect: g,
   onFilter: h,
-  onScrollEnd: R,
-  onTargetInputFocus: D,
-  onTargetInputBlur: b,
-  renderTarget: N,
-  renderTargetInput: U,
-  renderTargetLabel: V,
-  renderTargetPrefix: W,
-  renderTargetPostfix: X,
-  renderDropdown: H,
-  renderDropdownList: Y,
-  renderDropdownListItem: Z,
-  "data-test-id": c,
-  ...T
+  onScrollEnd: y,
+  onClear: p,
+  prefix: Q,
+  postfix: U,
+  renderInput: A,
+  renderDropdown: C,
+  renderDropdownList: V,
+  renderDropdownListItem: W,
+  inputProps: i,
+  ...X
 }) => {
-  const [m, l] = f((e == null ? void 0 : e.label) || ""), [u, w] = f(), [i, M] = f(!1), [o, n] = f(!1), [O, S] = f(!1), j = k(ft()), L = k(null), _ = k(null), C = k(R);
-  C.current = R;
-  const I = s(
+  const [a, l] = u((o == null ? void 0 : o.label) || ""), [H, D] = u(), [f, $] = u(!1), [r, c] = u(!1), M = b(St()), L = b(null), N = b(null), E = b(y);
+  E.current = y;
+  const Y = s(
     (t) => {
-      l((t == null ? void 0 : t.label) || ""), w(void 0), n(!1), S(!0), d(t);
+      l((t == null ? void 0 : t.label) || ""), D(void 0), c(!1), g(t);
     },
-    [d]
-  ), tt = s(
+    [g]
+  ), Z = s(
     (t) => {
-      M(!0), n(!0), A && m.length !== 0 && l(""), D == null || D(t);
+      var e;
+      $(!0), k && a.length !== 0 && l(""), (e = i.onFocus) == null || e.call(i, t);
     },
-    [A, m, D]
-  ), et = s(
+    [k, a, i]
+  ), _ = s(
     (t) => {
-      w(void 0), M(!1), n(!1), S(!1), m.length !== 0 ? l((e == null ? void 0 : e.label) || "") : d(void 0), b == null || b(t);
+      var e;
+      D(void 0), $(!1), c(!1), a.length !== 0 ? l((o == null ? void 0 : o.label) || "") : g(void 0), (e = i.onBlur) == null || e.call(i, t);
     },
-    [e == null ? void 0 : e.label, m, d, b]
-  ), ot = s(() => {
-    i && !o && (n(!0), S(!1));
-  }, [i, o]), rt = s(
+    [o == null ? void 0 : o.label, a, g, i]
+  ), v = s(() => {
+    f && !r && c(!0);
+  }, [f, r]), P = s(
     (t) => {
-      const r = t.target.value;
-      l(r), S(!1), h(r);
+      const e = t.target.value;
+      r === !1 && m.length > 0 && c(!0), l(e), h(e);
     },
-    [h]
-  ), st = s(() => {
-    i ? (l(""), h("")) : d(void 0);
-  }, [i, h, d]), it = s(
+    [r, m.length, h]
+  ), tt = s(
     (t) => {
-      u !== t && w(t);
+      f && (l(""), h("")), p == null || p(t);
     },
-    [u]
-  ), P = s(
-    ht((t) => {
-      if (C.current === void 0)
+    [f, h, p]
+  ), I = s(
+    Ft((t) => {
+      if (E.current === void 0)
         return;
-      const r = t.target, a = r.parentElement;
-      if (a === null)
+      const e = t.target, B = e.parentElement;
+      if (B === null)
         return;
-      const dt = r.scrollHeight, lt = r.scrollTop, pt = a.scrollHeight, $ = window.getComputedStyle(a), ct = $.getPropertyValue("padding-top"), mt = $.getPropertyValue("padding-bottom"), at = Number.parseInt(mt) + Number.parseInt(ct);
-      Math.abs(lt + pt - at - dt) <= 1 && C.current();
+      const et = e.scrollHeight, rt = e.scrollTop, it = B.scrollHeight, O = window.getComputedStyle(B), nt = O.getPropertyValue("padding-top"), st = O.getPropertyValue("padding-bottom"), mt = Number.parseInt(st) + Number.parseInt(nt);
+      Math.abs(rt + it - mt - et) <= 1 && E.current();
     }, 100),
     []
   );
-  E(() => {
-    l((e == null ? void 0 : e.label) || "");
-  }, [e]), E(() => {
-    i && (o && p.length === 0 ? n(!1) : !o && !O && p.length !== 0 && n(!0));
-  }, [i, o, O, p.length]), E(() => {
-    if (o) {
-      const t = _.current;
-      return t && t.addEventListener("scroll", P), () => {
-        t && t.removeEventListener("scroll", P);
+  x(() => {
+    l((o == null ? void 0 : o.label) || "");
+  }, [o]), x(() => {
+    r && m.length === 0 && c(!1);
+  }, [r, m.length]), x(() => {
+    if (r) {
+      const t = N.current;
+      return t && t.addEventListener("scroll", I), () => {
+        t && t.removeEventListener("scroll", I);
       };
     }
-  }, [o, P]);
-  const nt = () => {
-    const t = Dt(Ct.suggestFieldDesktop, "hoverable", z), r = N === void 0 ? ut : N, a = H === void 0 ? gt : H;
-    return /* @__PURE__ */ g("div", { className: t, "data-test-id": c, ...T, ref: L, children: /* @__PURE__ */ q(
-      kt.Provider,
+  }, [r, I]);
+  const ot = () => {
+    const t = A === void 0 ? gt : A, e = C === void 0 ? dt : C;
+    return /* @__PURE__ */ w(
+      at,
       {
-        value: { activeDescendant: u, setActiveDescendant: it },
+        "data-test-id": d,
+        status: F,
+        size: S,
+        prefix: Q,
+        postfix: /* @__PURE__ */ w(lt.Fragment, { children: [
+          p !== void 0 && /* @__PURE__ */ n(ft, { onClick: tt }),
+          q && /* @__PURE__ */ n(ht, { theme: ut.BRAND, size: S }),
+          U
+        ] }),
+        ...X,
+        ref: L,
         children: [
-          /* @__PURE__ */ g(
-            r,
+          /* @__PURE__ */ n(
+            t,
             {
-              size: y,
-              status: F,
-              inputValue: m,
-              label: v,
-              placeholder: B,
-              "aria-controls": j.current,
-              "aria-activedescendant": u,
-              loading: G,
-              dropdownOpen: o,
-              onFocus: tt,
-              onBlur: et,
-              onClick: ot,
-              onChange: rt,
-              onClear: st,
-              renderInput: U,
-              renderLabel: V,
-              renderPrefix: W,
-              renderPostfix: X,
-              dataTestId: c
+              value: a,
+              placeholder: z,
+              "data-test-id": d && `${d}${j.Suggest.input}`,
+              ...i,
+              role: "combobox",
+              "aria-controls": M.current,
+              "aria-activedescendant": H,
+              "aria-expanded": r,
+              disabled: F === T.DISABLED,
+              onFocus: Z,
+              onBlur: _,
+              onClick: v,
+              onChange: P
             }
           ),
-          /* @__PURE__ */ g(
-            a,
+          /* @__PURE__ */ n(bt.Provider, { value: { activeDescendant: H, setActiveDescendant: D }, children: /* @__PURE__ */ n(
+            e,
             {
-              value: e,
-              options: p,
-              size: y,
-              listId: j.current,
-              opened: o && p.length > 0,
-              listLoading: J,
-              listRef: _,
-              onSelect: I,
-              renderList: Y,
-              renderListItem: Z,
-              setOpened: n,
+              value: o,
+              options: m,
+              size: S,
+              listId: M.current,
+              opened: r && m.length > 0,
+              listLoading: G,
+              listRef: N,
+              onSelect: Y,
+              renderList: V,
+              renderListItem: W,
+              setOpened: c,
               targetRef: L,
-              dataTestId: c
+              dataTestId: d
             }
-          )
+          ) })
         ]
       }
-    ) });
+    );
   };
-  return /* @__PURE__ */ q(
-    x,
+  return /* @__PURE__ */ w(
+    R,
     {
-      size: bt.SM,
-      isOpen: !!(Q && i) && F !== St.DISABLED,
+      size: pt.SM,
+      isOpen: !!(K && f) && F !== T.DISABLED,
       toggle: () => {
       },
       targetRef: L,
       disableAdaptiveMode: !0,
       children: [
-        /* @__PURE__ */ g(x.Body, { "data-test-id": c && `${c}${wt.Suggest.tooltip}`, children: K }),
-        /* @__PURE__ */ g(x.Target, { children: nt() })
+        /* @__PURE__ */ n(R.Body, { "data-test-id": d && `${d}${j.Suggest.tooltip}`, children: J }),
+        /* @__PURE__ */ n(R.Target, { children: ot() })
       ]
     }
   );
 };
-Pt.displayName = "SuggestFieldDesktop";
 export {
-  Pt as SuggestFieldDesktop
+  io as SuggestFieldDesktop
 };
 //# sourceMappingURL=SuggestFieldDesktop.js.map

package/components/SuggestField/desktop/SuggestFieldDesktopDropdown.js

@@ -1,9 +1,8 @@
 import { jsx as m } from "react/jsx-runtime";
-import { Dropdown as $ } from "../../Dropdown/Dropdown.js";
 import "../../Dropdown/DropdownListContext.js";
 import "../../Dropdown/desktop/DropdownDesktop.js";
-import { DropdownList as h } from "../../Dropdown/desktop/DropdownList.js";
-import { D as C } from "../../../chunks/DropdownListItem-BByGOD7_.js";
+import { DropdownList as $ } from "../../Dropdown/desktop/DropdownList.js";
+import { D as h } from "../../../chunks/DropdownListItem-BdSacGyt.js";
 import "../../Dropdown/mobile/DropdownMobile.js";
 import "../../Dropdown/mobile/DropdownMobileBody.js";
 import "../../Dropdown/mobile/DropdownMobileClose.js";
@@ -15,6 +14,7 @@ import "../../Dropdown/mobile/DropdownMobileList.js";
 import "../../Dropdown/mobile/DropdownMobileListItem.js";
 import "../../Loader/LoaderSmall/LoaderSmall.js";
 import "../../Loader/LoaderMiddle/LoaderMiddle.js";
+import { Dropdown as C } from "../../Dropdown/Dropdown.js";
 import { EVENT_KEY_CODES as L } from "../../../utils/keyboard.js";
 import { DataTestId as d } from "../../../consts/DataTestId.js";
 const _ = [L.ENTER], G = ({
@@ -33,9 +33,9 @@ const _ = [L.ENTER], G = ({
   setOpened: l,
   ...w
 }) => {
-  const S = n === void 0 ? h : n, g = D === void 0 ? C : D;
+  const S = n === void 0 ? $ : n, g = D === void 0 ? h : D;
   return /* @__PURE__ */ m(
-    $,
+    C,
     {
       size: e,
       targetRef: s,

package/components/SuggestField/index.js

@@ -1,17 +1,15 @@
 import { SuggestFieldDesktopDropdown as r } from "./desktop/SuggestFieldDesktopDropdown.js";
 import { SuggestFieldDesktop as g } from "./desktop/SuggestFieldDesktop.js";
-import { SuggestFieldMobile as p } from "./mobile/SuggestFieldMobile.js";
-import { SuggestFieldMobileDropdown as d } from "./mobile/SuggestFieldMobileDropdown.js";
-import { S } from "../../chunks/SuggestFieldMobileDropdownHint-BM9lOqXe.js";
-import { SuggestFieldMobileTarget as m } from "./mobile/SuggestFieldMobileTarget.js";
-import { SuggestField as x } from "./SuggestField.js";
+import { SuggestFieldMobile as i } from "./mobile/SuggestFieldMobile.js";
+import { SuggestFieldMobileDropdown as l } from "./mobile/SuggestFieldMobileDropdown.js";
+import { S } from "../../chunks/SuggestFieldMobileDropdownHint-C_9OyUAk.js";
+import { SuggestField as m } from "./SuggestField.js";
 export {
-  x as SuggestField,
+  m as SuggestField,
   g as SuggestFieldDesktop,
   r as SuggestFieldDesktopDropdown,
-  p as SuggestFieldMobile,
-  d as SuggestFieldMobileDropdown,
-  S as SuggestFieldMobileDropdownHint,
-  m as SuggestFieldMobileTarget
+  i as SuggestFieldMobile,
+  l as SuggestFieldMobileDropdown,
+  S as SuggestFieldMobileDropdownHint
 };
 //# sourceMappingURL=index.js.map

package/components/SuggestField/mobile/SuggestFieldMobile.js

@@ -1,80 +1,99 @@
-import { jsxs as B, jsx as c } from "react/jsx-runtime";
-import { useState as E, useRef as p, useEffect as L } from "react";
-import { c as N } from "../../../chunks/vendor-CalMVkfj.js";
-import { SuggestFieldMobileTarget as R } from "./SuggestFieldMobileTarget.js";
-import { SuggestFieldMobileDropdown as q } from "./SuggestFieldMobileDropdown.js";
-import { s as z } from "../../../chunks/SuggestFieldMobileDropdownHint-BM9lOqXe.js";
-function U({
-  className: m,
+import { jsxs as u, jsx as t } from "react/jsx-runtime";
+import k, { useState as v, useRef as F, useEffect as B } from "react";
+import { EComponentSize as C } from "../../../enums/EComponentSize.js";
+import { SuggestFieldMobileDropdown as I } from "./SuggestFieldMobileDropdown.js";
+import { TextFieldBase as M } from "../../TextField/TextFieldBase.js";
+import { DataTestId as $ } from "../../../consts/DataTestId.js";
+import "../../FormField/FormField.js";
+import "../../FormField/components/FormFieldDescription.js";
+import "../../FormField/components/FormFieldCounter.js";
+import "../../FormField/components/FormFieldLabel.js";
+import { FormFieldClear as y } from "../../FormField/components/FormFieldClear.js";
+import "../../FormField/components/FormFieldTarget.js";
+import { F as A } from "../../../chunks/FormFieldInput-DDUEO0k6.js";
+import "../../FormField/components/FormFieldMaskedInput.js";
+import "../../FormField/components/FormFieldPostfix.js";
+import "../../FormField/components/FormFieldPrefix.js";
+import "../../FormField/components/FormFieldTextarea.js";
+import { LoaderSmall as G } from "../../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme as N } from "../../Loader/LoaderSmall/enum.js";
+import "../../Loader/LoaderMiddle/LoaderMiddle.js";
+import "../../../chunks/SuggestFieldMobileDropdownHint-C_9OyUAk.js";
+const no = ({
   value: r,
-  options: u,
-  size: a,
-  status: b,
-  label: x,
-  placeholder: t,
-  dropdownHint: g,
-  loading: n,
-  dropdownListLoading: w,
-  clearInputOnFocus: M,
-  onFilter: O,
-  onSelect: i,
-  onScrollEnd: D,
-  onTargetInputFocus: o,
-  onTargetInputBlur: S,
-  renderTarget: l,
-  renderTargetInput: h,
-  renderTargetLabel: j,
-  renderTargetPrefix: v,
-  renderTargetPostfix: C,
-  ...F
-}) {
-  const [e, d] = E(!1), s = p(null), f = p(!1), P = l === void 0 ? R : l;
-  L(() => {
-    f.current && !e && s.current && s.current.scrollIntoView({ block: "center" }), f.current = e;
-  }, [e]);
-  const V = () => i(void 0), k = (y) => {
-    d(!0), o == null || o(y);
+  options: x,
+  size: n = C.LG,
+  placeholder: p,
+  "data-test-id": m,
+  postfix: S,
+  tooltipHint: b,
+  loading: d,
+  dropdownListLoading: g,
+  clearInputOnFocus: w,
+  onFilter: D,
+  onSelect: O,
+  onClear: l,
+  onScrollEnd: h,
+  renderInput: s,
+  inputProps: e,
+  ...E
+}) => {
+  const [o, c] = v(!1), i = F(null), a = F(!1), L = s === void 0 ? A : s;
+  B(() => {
+    a.current && !o && i.current && i.current.scrollIntoView({ block: "center" }), a.current = o;
+  }, [o]);
+  const R = (j) => {
+    var f;
+    c(!0), (f = e.onFocus) == null || f.call(e, j);
   };
-  return /* @__PURE__ */ B("div", { className: N(z.suggestFieldMobile, m), ...F, ref: s, children: [
-    /* @__PURE__ */ c(
-      P,
-      {
-        size: a,
-        status: b,
-        inputValue: r ? r.label : "",
-        label: x,
-        placeholder: t,
-        loading: n,
-        dropdownOpen: e,
-        onClear: V,
-        onFocus: k,
-        onBlur: S,
-        renderInput: h,
-        renderLabel: j,
-        renderPrefix: v,
-        renderPostfix: C
-      }
-    ),
-    /* @__PURE__ */ c(
-      q,
-      {
-        value: r,
-        options: u,
-        placeholder: t,
-        dropdownHint: g,
-        opened: e,
-        loading: n,
-        dropdownListLoading: w,
-        clearInputOnFocus: M,
-        setOpened: d,
-        onFilter: O,
-        onSelect: i,
-        onScrollEnd: D
-      }
-    )
-  ] });
-}
+  return /* @__PURE__ */ u(
+    M,
+    {
+      "data-test-id": m,
+      size: n,
+      postfix: /* @__PURE__ */ u(k.Fragment, { children: [
+        l !== void 0 && /* @__PURE__ */ t(y, { onClick: l }),
+        d && /* @__PURE__ */ t(G, { theme: N.BRAND, size: n }),
+        S
+      ] }),
+      ...E,
+      ref: i,
+      children: [
+        /* @__PURE__ */ t(
+          L,
+          {
+            value: r ? r.label : "",
+            placeholder: p,
+            role: "combobox",
+            "aria-expanded": o,
+            "data-test-id": m && `${m}${$.Suggest.input}`,
+            ...e,
+            readOnly: !0,
+            onFocus: R
+          }
+        ),
+        /* @__PURE__ */ t(
+          I,
+          {
+            value: r,
+            options: x,
+            placeholder: p,
+            tooltipHint: b,
+            opened: o,
+            loading: d,
+            dropdownListLoading: g,
+            clearInputOnFocus: w,
+            setOpened: c,
+            onFilter: D,
+            onSelect: O,
+            onScrollEnd: h
+          }
+        )
+      ]
+    }
+  );
+};
 export {
-  U as SuggestFieldMobile
+  no as SuggestFieldMobile
 };
 //# sourceMappingURL=SuggestFieldMobile.js.map