@sberbusiness/triplex-next 0.1.8 → 0.10.0

package/components/Body/Body.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
 import n from "react";
-import { c as t } from "../../chunks/vendor-CF2m175I.js";
-const y = "body__394f42a9", c = "bodyInner__d620ed28", d = {
-  body: y,
-  bodyInner: c
-}, m = n.forwardRef(({ children: e, className: r, ...s }, a) => /* @__PURE__ */ o("div", { className: t(d.body, r), ...s, "data-tx": "0.1.8", ref: a, children: /* @__PURE__ */ o("div", { className: d.bodyInner, children: e }) }));
-m.displayName = "Body";
+import { c as a } from "../../chunks/vendor-BlJo2ILB.js";
+const t = "body__ec1c299b", y = "bodyInner__446451ac", d = {
+  body: t,
+  bodyInner: y
+}, b = n.forwardRef(({ children: r, className: s, ...c }, e) => /* @__PURE__ */ o("div", { className: a(d.body, s), ...c, "data-tx": "0.10.0", ref: e, children: /* @__PURE__ */ o("div", { className: d.bodyInner, children: r }) }));
+b.displayName = "Body";
 export {
-  m as Body
+  b as Body
 };
 //# sourceMappingURL=Body.js.map

package/components/Button/Button.js

@@ -1,14 +1,101 @@
-import "react/jsx-runtime";
-import "react";
-import "../../chunks/vendor-CF2m175I.js";
-import { B as s } from "../../chunks/index-Cn4S9Yzd.js";
-import "./ButtonBase.js";
-import "./ButtonIcon.js";
-import "./enums.js";
-import "../Loader/LoaderSmall/LoaderSmall.js";
-import "../Loader/LoaderSmall/enum.js";
+import { jsxs as m, jsx as y } from "react/jsx-runtime";
+import k from "react";
+import { c as p } from "../../chunks/vendor-BlJo2ILB.js";
+import { LoaderSmall as R } from "../Loader/LoaderSmall/LoaderSmall.js";
+import { ELoaderSmallTheme as b } from "../Loader/LoaderSmall/enum.js";
 import "../Loader/LoaderMiddle/LoaderMiddle.js";
+import { ButtonBase as C } from "./ButtonBase.js";
+import { EButtonTheme as d } from "./enums.js";
+import { EComponentSize as s } from "../../enums/EComponentSize.js";
+const A = "general__04e36714", B = "expanded__33d041bd", g = {
+  general: A,
+  expanded: B
+}, D = "secondary__5b02de9e", T = "expanded__33d041bd", u = {
+  secondary: D,
+  expanded: T
+}, G = "secondaryLight__f1b69ef0", I = "expanded__33d041bd", x = {
+  secondaryLight: G,
+  expanded: I
+}, v = "danger__57b0f414", O = "expanded__33d041bd", h = {
+  danger: v,
+  expanded: O
+}, Y = "link__4e1c4351", $ = "expanded__33d041bd", f = {
+  link: Y,
+  expanded: $
+}, w = "button__31b6d5c2", z = "sm__607f2d43", M = "icon__b30e6a29", j = "md__c6aacabe", H = "lg__7cbe9c2b", K = "block__c3c2440b", U = "content__349552da", q = "loading__126e7fa3", F = "loader__8a25d3d8", J = "hidden__f9dfef89", e = {
+  button: w,
+  sm: z,
+  icon: M,
+  md: j,
+  lg: H,
+  block: K,
+  content: U,
+  loading: q,
+  loader: F,
+  hidden: J
+}, P = (t, n) => {
+  switch (t) {
+    case d.GENERAL:
+      return { [g.general]: !0, [g.expanded]: n };
+    case d.SECONDARY:
+      return {
+        [u.secondary]: !0,
+        [u.expanded]: n
+      };
+    case d.SECONDARY_LIGHT:
+      return {
+        [x.secondaryLight]: !0,
+        [x.expanded]: n
+      };
+    case d.DANGER:
+      return {
+        [h.danger]: !0,
+        [h.expanded]: n
+      };
+    case d.LINK:
+      return {
+        [f.link]: !0,
+        [f.expanded]: n
+      };
+  }
+}, Q = (t) => {
+  switch (t) {
+    case s.LG:
+      return e.lg;
+    case s.MD:
+      return e.md;
+    case s.SM:
+      return e.sm;
+  }
+}, V = (t, n) => {
+  const o = [d.SECONDARY, d.SECONDARY_LIGHT].includes(t) ? b.BRAND : b.NEUTRAL;
+  return /* @__PURE__ */ y(R, { theme: o, size: n });
+}, W = k.forwardRef((t, n) => {
+  const { children: o, className: N, disabled: c, theme: r, size: l = s.MD, block: L, loading: a, icon: i, ...S } = t, { "aria-expanded": _ } = t, E = p(
+    e.button,
+    P(r, !!_),
+    Q(l),
+    { [e.block]: !!L, [e.loading]: !!a },
+    { [e.icon]: !!i && !o },
+    // Классы для иконок, начало.
+    "hoverable",
+    {
+      active: !!_,
+      disabled: !!c
+    },
+    // Классы для иконок, конец.
+    N
+  );
+  return /* @__PURE__ */ m(C, { className: E, tabIndex: a ? -1 : void 0, disabled: c, ...S, ref: n, children: [
+    /* @__PURE__ */ m("span", { className: e.content, children: [
+      i,
+      o
+    ] }),
+    /* @__PURE__ */ y("div", { className: p(e.loader, !a && e.hidden), children: V(r, l) })
+  ] });
+});
+W.displayName = "Button";
 export {
-  s as Button
+  W as Button
 };
 //# sourceMappingURL=Button.js.map

package/components/Button/ButtonBase.js

@@ -1,8 +1,8 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "react";
-const r = e.forwardRef((t, o) => /* @__PURE__ */ a("button", { type: "button", ...t, "data-tx": "0.1.8", ref: o }));
-r.displayName = "ButtonBase";
+import { jsx as r } from "react/jsx-runtime";
+import a from "react";
+const e = a.forwardRef((t, o) => /* @__PURE__ */ r("button", { type: "button", ...t, "data-tx": "0.10.0", ref: o }));
+e.displayName = "ButtonBase";
 export {
-  r as ButtonBase
+  e as ButtonBase
 };
 //# sourceMappingURL=ButtonBase.js.map

package/components/Button/ButtonDropdown.js

@@ -1,26 +1,172 @@
-import "react/jsx-runtime";
-import "react";
-import { a as j, d as k } from "../../chunks/index-Cn4S9Yzd.js";
-import "./enums.js";
-import "@sberbusiness/icons-next";
-import "../../utils/keyboard.js";
-import "../../chunks/DropdownListItem-iil7gCyc.js";
-import "../Dropdown/mobile/DropdownMobile.js";
-import "../Dropdown/mobile/DropdownMobileBody.js";
-import "../Dropdown/mobile/DropdownMobileClose.js";
-import "../Dropdown/mobile/DropdownMobileFooter.js";
-import "../Dropdown/mobile/DropdownMobileHeader.js";
-import "../Dropdown/mobile/DropdownMobileInner.js";
-import "../Dropdown/mobile/DropdownMobileInput.js";
-import "../Dropdown/mobile/DropdownMobileList.js";
-import "../Dropdown/mobile/DropdownMobileListItem.js";
-import "../Dropdown/enums.js";
-import "../Dropdown/DropdownListContext.js";
-import "../Typography/Text.js";
-import "../Typography/enums.js";
-import "../../chunks/vendor-CF2m175I.js";
+import { Button as M } from "./Button.js";
+import "./ButtonBase.js";
+import "./ButtonIcon.js";
+import { jsx as t, jsxs as B, Fragment as q } from "react/jsx-runtime";
+import F, { useRef as R, useState as V, createElement as x } from "react";
+import { c as w, a as J } from "../../chunks/vendor-BlJo2ILB.js";
+import { ButtonDropdownExtended as y } from "./ButtonDropdownExtended.js";
+import { EButtonDotsTheme as u, EButtonTheme as d } from "./enums.js";
+import { DotshorizontalStrokeSrvIcon32 as Q, DotshorizontalStrokeSrvIcon20 as L, CaretdownStrokeSrvIcon16 as X, CaretdownStrokeSrvIcon20 as Z, CaretdownStrokeSrvIcon24 as $ } from "@sberbusiness/icons-next";
+import { isKey as D } from "../../utils/keyboard.js";
+import { DropdownListContext as oo } from "../Dropdown/DropdownListContext.js";
+import { DropdownMobileHeader as to } from "../Dropdown/mobile/DropdownMobileHeader.js";
+import { DropdownMobileBody as eo } from "../Dropdown/mobile/DropdownMobileBody.js";
+import { DropdownMobileList as ro } from "../Dropdown/mobile/DropdownMobileList.js";
+import { DropdownMobileListItem as no } from "../Dropdown/mobile/DropdownMobileListItem.js";
+import { DropdownMobileClose as co } from "../Dropdown/mobile/DropdownMobileClose.js";
+import { Text as ao } from "../Typography/Text.js";
+import { ETextSize as so } from "../Typography/enums.js";
+import { DropdownList as Y } from "../Dropdown/desktop/DropdownList.js";
+import { EComponentSize as b } from "../../enums/EComponentSize.js";
+const lo = "buttonDropdown__ef49e98d", io = "block__c3c2440b", mo = "buttonDropdownTarget__bf3b46a8", uo = "caretIcon__97b7bd57", Do = "active__4ed350c7", bo = "buttonDropdownMenuItem__9a276b9a", n = {
+  buttonDropdown: lo,
+  block: io,
+  buttonDropdownTarget: mo,
+  caretIcon: uo,
+  active: Do,
+  buttonDropdownMenuItem: bo
+}, po = {
+  [b.SM]: /* @__PURE__ */ t(L, { paletteIndex: 0 }),
+  [b.MD]: /* @__PURE__ */ t(L, { paletteIndex: 0 }),
+  [b.LG]: /* @__PURE__ */ t(Q, { paletteIndex: 0 })
+}, g = (p, c) => p === b.SM ? /* @__PURE__ */ t(X, { paletteIndex: c, className: n.caretIcon }) : p === b.MD ? /* @__PURE__ */ t(Z, { paletteIndex: c, className: n.caretIcon }) : /* @__PURE__ */ t($, { paletteIndex: c, className: n.caretIcon }), fo = F.forwardRef(
+  (p, c) => {
+    const { buttonAttributes: _, children: h, className: z, theme: f, size: s, options: C, selected: i, block: S, disabled: T, ...G } = p, k = R(null), v = R(null), W = w(n.buttonDropdown, { [n.block]: !!S }, z), [N, H] = V(), I = R(J()), P = ({ opened: o, setOpened: r }) => {
+      const a = w(n.buttonDropdownTarget, "hoverable", {
+        [n.active]: o,
+        [n.block]: !!S
+      });
+      return /* @__PURE__ */ B(
+        M,
+        {
+          className: a,
+          theme: f,
+          size: s,
+          onKeyDown: A({ opened: o, setOpened: r }),
+          onClick: E({ opened: o, setOpened: r }),
+          disabled: T,
+          "aria-haspopup": "menu",
+          "aria-expanded": o,
+          "aria-controls": I.current,
+          "aria-activedescendant": N,
+          ..._,
+          ref: O,
+          children: [
+            h,
+            j()
+          ]
+        }
+      );
+    }, K = ({ opened: o, setOpened: r }) => {
+      const a = w(n.buttonDropdownTarget, "hoverable", {
+        [n.active]: o,
+        [n.block]: !!S
+      });
+      return /* @__PURE__ */ t(
+        M,
+        {
+          className: a,
+          theme: f === u.DOTS_SECONDARY ? d.SECONDARY : d.SECONDARY_LIGHT,
+          size: s,
+          onKeyDown: A({ opened: o, setOpened: r }),
+          onClick: E({ opened: o, setOpened: r }),
+          disabled: T,
+          "aria-haspopup": "menu",
+          "aria-expanded": o,
+          "aria-controls": I.current,
+          "aria-activedescendant": N,
+          ..._,
+          ref: O,
+          icon: po[s]
+        }
+      );
+    }, E = ({ opened: o, setOpened: r }) => () => r(!o), A = ({ opened: o, setOpened: r }) => (a) => {
+      const { key: l } = a;
+      (D(l, "SPACE") || D(l, "ARROW_UP") || D(l, "ARROW_DOWN")) && a.preventDefault(), !o && (D(l, "ARROW_UP") || D(l, "ARROW_DOWN")) && r(!0);
+    }, j = () => {
+      switch (f) {
+        case d.GENERAL:
+        case d.DANGER:
+        case u.DOTS_SECONDARY:
+        case u.DOTS_SECONDARY_LIGHT:
+          return g(s, 7);
+        case d.SECONDARY:
+        case d.SECONDARY_LIGHT:
+          return g(s, 0);
+        default:
+          return null;
+      }
+    }, U = ({ opened: o, setOpened: r, className: a }) => {
+      const l = w(n.buttonDropdownMenu, a);
+      return /* @__PURE__ */ t(oo.Provider, { value: { activeDescendant: N, setActiveDescendant: H }, children: /* @__PURE__ */ t(
+        y.Dropdown,
+        {
+          size: s,
+          className: l,
+          opened: o,
+          setOpened: r,
+          targetRef: k,
+          ref: v,
+          mobileViewProps: {
+            children: /* @__PURE__ */ B(q, { children: [
+              /* @__PURE__ */ t(
+                to,
+                {
+                  controlButtons: /* @__PURE__ */ t(co, { onClick: () => r(!1) }),
+                  children: /* @__PURE__ */ t(ao, { tag: "div", size: so.B3, children: h })
+                }
+              ),
+              /* @__PURE__ */ t(eo, { children: /* @__PURE__ */ t(ro, { children: C.map((e) => /* @__PURE__ */ x(
+                no,
+                {
+                  ...e,
+                  key: e.id,
+                  selected: e.id === (i == null ? void 0 : i.id),
+                  onSelect: () => {
+                    var m;
+                    (m = e.onSelect) == null || m.call(e), r(!1);
+                  }
+                },
+                e.label
+              )) }) })
+            ] })
+          },
+          children: /* @__PURE__ */ t(Y, { dropdownOpened: o, id: I.current, size: s, children: C.map((e) => /* @__PURE__ */ x(
+            Y.Item,
+            {
+              ...e,
+              className: n.buttonDropdownMenuItem,
+              key: e.id,
+              selected: e.id === (i == null ? void 0 : i.id),
+              onSelect: () => {
+                var m;
+                (m = e.onSelect) == null || m.call(e), r(!1);
+              }
+            },
+            e.label
+          )) })
+        }
+      ) });
+    }, O = (o) => {
+      k.current = o, typeof c == "function" ? c(o) : c && (c.current = o);
+    };
+    return /* @__PURE__ */ t(
+      y,
+      {
+        className: W,
+        renderButton: [u.DOTS_SECONDARY, u.DOTS_SECONDARY_LIGHT].includes(
+          f
+        ) ? K : P,
+        renderDropdown: U,
+        dropdownRef: v,
+        closeOnTab: !0,
+        ...G
+      }
+    );
+  }
+);
+fo.displayName = "ButtonDropdown";
 export {
-  j as ButtonDropdown,
-  k as dotsTheme
+  fo as ButtonDropdown
 };
 //# sourceMappingURL=ButtonDropdown.js.map

package/components/Button/ButtonDropdownExtended.js

@@ -1,9 +1,53 @@
-import "react/jsx-runtime";
-import "react";
-import { b as d } from "../../chunks/index-Cn4S9Yzd.js";
-import "../../utils/keyboard.js";
-import "../../chunks/vendor-CF2m175I.js";
+import { jsxs as h } from "react/jsx-runtime";
+import { useRef as f, useState as C, useCallback as N, useEffect as R } from "react";
+import { Dropdown as _ } from "../Dropdown/Dropdown.js";
+import { isKey as w } from "../../utils/keyboard.js";
+import { DropdownList as g } from "../Dropdown/desktop/DropdownList.js";
+import { c as A } from "../../chunks/vendor-BlJo2ILB.js";
+const K = "buttonDropdownExtended__f37de3e0", S = "buttonDropdownExtendedBlock__7dcca300", E = {
+  buttonDropdownExtended: K,
+  buttonDropdownExtendedBlock: S
+}, D = (s) => {
+  const { className: v, opened: x, setOpened: c, renderButton: k, renderDropdown: b, dropdownRef: l, closeOnTab: p, ...L } = s, u = f(null), m = f(s.opened !== void 0), [O, y] = C((s.opened === void 0, !1)), e = m.current ? !!x : O, o = N(
+    (t) => {
+      if (m.current) {
+        c && c(t);
+        return;
+      }
+      y(t);
+    },
+    [c]
+  );
+  R(() => {
+    if (!e)
+      return;
+    const t = (r) => {
+      const n = r.code || r.keyCode;
+      e && (w(n, "ESCAPE") || p && w(n, "TAB")) && o(!1);
+    }, d = (r) => {
+      const n = u.current, a = l.current;
+      if (e) {
+        const i = r.target;
+        i && !(n != null && n.contains(i)) && !(a != null && a.contains(i)) && o(!1);
+      }
+    };
+    return document.addEventListener("keydown", t), document.addEventListener("mousedown", d), document.addEventListener("touchstart", d), () => {
+      document.removeEventListener("keydown", t), document.removeEventListener("mousedown", d), document.removeEventListener("touchstart", d);
+    };
+  }, [e, p, l, o, u]);
+  const B = A(E.buttonDropdownExtended, v);
+  return /* @__PURE__ */ h("div", { className: B, ref: u, ...L, children: [
+    k({ opened: e, setOpened: o }),
+    b({
+      className: E.buttonDropdownExtendedBlock,
+      opened: e,
+      setOpened: o
+    })
+  ] });
+};
+D.Dropdown = _;
+D.DropdownList = g;
 export {
-  d as ButtonDropdownExtended
+  D as ButtonDropdownExtended
 };
 //# sourceMappingURL=ButtonDropdownExtended.js.map

package/components/Button/ButtonIcon.js

@@ -1,29 +1,25 @@
 import { jsx as l } from "react/jsx-runtime";
-import i from "react";
-import { EButtonIconShape as c } from "./enums.js";
-import { c as m } from "../../chunks/vendor-CF2m175I.js";
-const I = "buttonIcon__d827215d", f = "circle__8e26373f", p = "squircle__1a9f33d5", o = {
-  buttonIcon: I,
-  circle: f,
-  squircle: p
-}, _ = (t) => {
-  switch (t) {
-    case c.SQUIRCLE:
-      return o.squircle;
-    case c.CIRCLE:
-      return o.circle;
-  }
-}, b = i.forwardRef(
-  ({ className: t, disabled: e, shape: n = c.SQUIRCLE, active: s, ...r }, a) => {
-    const u = m(o.buttonIcon, _(n), "hoverable", t, {
+import u from "react";
+import { c as m } from "../../chunks/vendor-BlJo2ILB.js";
+import { EButtonIconShape as o } from "./enums.js";
+const b = "buttonIcon__77ca6b5a", p = "circle__be2f33b4", I = "squircle__09faa021", t = {
+  buttonIcon: b,
+  circle: p,
+  squircle: I
+}, f = {
+  [o.SQUIRCLE]: t.squircle,
+  [o.CIRCLE]: t.circle
+}, _ = u.forwardRef(
+  ({ className: n, disabled: c, shape: e = o.SQUIRCLE, active: s, ...r }, a) => {
+    const i = m(t.buttonIcon, f[e], "hoverable", n, {
       active: !!s,
-      disabled: !!e
+      disabled: !!c
     });
-    return /* @__PURE__ */ l("button", { className: u, disabled: e, ...r, ref: a });
+    return /* @__PURE__ */ l("button", { type: "button", className: i, disabled: c, ...r, ref: a });
   }
 );
-b.displayName = "ButtonIcon";
+_.displayName = "ButtonIcon";
 export {
-  b as ButtonIcon
+  _ as ButtonIcon
 };
 //# sourceMappingURL=ButtonIcon.js.map

package/components/Button/enums.js

@@ -1,7 +1,7 @@
-var a = /* @__PURE__ */ ((r) => (r.GENERAL = "general", r.SECONDARY = "secondary", r.DANGER = "danger", r.LINK = "link", r))(a || {}), l = /* @__PURE__ */ ((r) => (r.LG = "lg", r.MD = "md", r.SM = "sm", r))(l || {}), L = /* @__PURE__ */ ((r) => (r.SQUIRCLE = "squircle", r.CIRCLE = "circle", r))(L || {});
+var a = /* @__PURE__ */ ((r) => (r.DOTS_SECONDARY = "dots_secondary", r.DOTS_SECONDARY_LIGHT = "dots_secondary_light", r))(a || {}), R = /* @__PURE__ */ ((r) => (r.GENERAL = "general", r.SECONDARY = "secondary", r.SECONDARY_LIGHT = "secondary_light", r.DANGER = "danger", r.LINK = "link", r))(R || {}), _ = /* @__PURE__ */ ((r) => (r.SQUIRCLE = "squircle", r.CIRCLE = "circle", r))(_ || {});
 export {
-  L as EButtonIconShape,
-  l as EButtonSize,
-  a as EButtonTheme
+  a as EButtonDotsTheme,
+  _ as EButtonIconShape,
+  R as EButtonTheme
 };
 //# sourceMappingURL=enums.js.map

package/components/Button/index.js

@@ -1,16 +1,17 @@
-import { B as e, a as n, b as r, d as B } from "../../chunks/index-Cn4S9Yzd.js";
-import { ButtonBase as a } from "./ButtonBase.js";
-import { ButtonIcon as d } from "./ButtonIcon.js";
-import { EButtonIconShape as s, EButtonSize as x, EButtonTheme as f } from "./enums.js";
+import { Button as e } from "./Button.js";
+import { ButtonBase as n } from "./ButtonBase.js";
+import { ButtonIcon as B } from "./ButtonIcon.js";
+import { ButtonDropdown as u } from "./ButtonDropdown.js";
+import { ButtonDropdownExtended as f } from "./ButtonDropdownExtended.js";
+import { EButtonDotsTheme as E, EButtonIconShape as h, EButtonTheme as D } from "./enums.js";
 export {
   e as Button,
-  a as ButtonBase,
-  n as ButtonDropdown,
-  r as ButtonDropdownExtended,
-  d as ButtonIcon,
-  s as EButtonIconShape,
-  x as EButtonSize,
-  f as EButtonTheme,
-  B as dotsTheme
+  n as ButtonBase,
+  u as ButtonDropdown,
+  f as ButtonDropdownExtended,
+  B as ButtonIcon,
+  E as EButtonDotsTheme,
+  h as EButtonIconShape,
+  D as EButtonTheme
 };
 //# sourceMappingURL=index.js.map