@sberbusiness/triplex-next 0.1.4 → 0.1.6

package/components/Tooltip/utils/Positioning.js

@@ -0,0 +1,124 @@
+import { ETooltipStartCoordinates as m, ETooltipSizeParameter as f, ETooltipEndCoordinates as O, ETooltipFlowTypes as d, ETooltipPreferPlace as x, ETooltipAlign as T, ETooltipTypeName as n, ETooltipAxesType as S } from "../enums.js";
+const F = 8, H = (e, t) => e.h === t.h && e.w === t.w && e.x === t.x && e.y === t.y && e.x2 === t.x2 && e.y2 === t.y2, E = {
+  column: {
+    cross: {
+      end: O.X,
+      size: f.W,
+      start: m.X
+    },
+    main: {
+      end: O.Y,
+      size: f.H,
+      start: m.Y
+    }
+  },
+  row: {
+    cross: {
+      end: O.Y,
+      size: f.H,
+      start: m.Y
+    },
+    main: {
+      end: O.X,
+      size: f.W,
+      start: m.X
+    }
+  }
+}, R = (e, t, r) => r[E[e][t].size] / 2, I = (e, t, r) => r[E[e][t].start] + r[E[e][t].size] / 2, M = (e, t, r, s) => I(e, t, r) - s[E[e][t].start], D = (e, t, r, s, o) => {
+  const i = E[e][t];
+  return r === T.CENTER ? I(e, t, s) - R(e, t, o) : r === T.END ? s[i.end] : r === T.START ? s[i.start] - o[i.size] : 0;
+}, G = (e) => {
+  if (e === window)
+    return {
+      h: e.innerHeight,
+      w: e.innerWidth,
+      x: 0,
+      x2: e.innerWidth,
+      y: 0,
+      y2: e.innerHeight
+    };
+  const t = e.getBoundingClientRect();
+  return {
+    h: t.bottom - t.top,
+    w: t.right - t.left,
+    x: t.left,
+    x2: t.right,
+    y: t.top,
+    y2: t.bottom
+  };
+}, p = (e) => (t, r) => t[e] >= r[e], C = p(f.W), L = p(f.H), g = (e, t) => C(e, t) && L(e, t), Y = (e, t, r, s, o, i) => {
+  let a = r.y + (r.y2 - r.y) / 2;
+  const l = t[O.Y] - a;
+  l < a && (a = l);
+  const N = a + i[f.H] - s - o - F, h = [
+    {
+      [n.SIDE]: T.START,
+      [n.STANDING]: x.ABOVE,
+      [n.FLOW]: d.COLUMN,
+      h: r.y,
+      order: -1,
+      w: t.x2
+    },
+    {
+      [n.SIDE]: T.END,
+      [n.STANDING]: x.RIGHT,
+      [n.FLOW]: d.ROW,
+      h: N,
+      order: 1,
+      w: t.x2 - r.x2
+    },
+    {
+      [n.SIDE]: T.END,
+      [n.STANDING]: x.BELOW,
+      [n.FLOW]: d.COLUMN,
+      h: t.y2 - r.y2,
+      order: 1,
+      w: t.x2
+    },
+    {
+      [n.SIDE]: T.START,
+      [n.STANDING]: x.LEFT,
+      [n.FLOW]: d.ROW,
+      h: N,
+      order: -1,
+      w: r.x
+    }
+  ];
+  h.forEach((c) => {
+    c.cutOff = /* area */
+    -Math.max(0, Math.min(c.w, i.w)) * Math.max(0, Math.min(c.h, i.h));
+  }), h.sort((c, y) => (c.cutOff ?? 0) - (y.cutOff ?? 0));
+  const W = h.filter((c) => g(c, i));
+  if (e) {
+    const c = W.filter((A) => A[n.STANDING] === e);
+    if (c.length)
+      return c[0];
+    const y = h.filter((A) => A[n.STANDING] === e);
+    if (!W.length && y.length)
+      return y[0];
+  }
+  return W.length ? W[0] : h[0];
+}, w = (e, t, r) => {
+  const { main: s, cross: o } = E[e.flow], i = T.CENTER, a = D(e.flow, S.MAIN, e.side, t, r), l = r[s.size], N = D(e.flow, S.CROSS, i, t, r), h = r[o.size];
+  return {
+    [o.start]: N,
+    crossLength: h,
+    [o.end]: N + h,
+    [s.start]: a,
+    mainLength: l,
+    [s.end]: a + l
+  };
+};
+export {
+  E as axes,
+  G as calcBounds,
+  w as calcRelPos,
+  I as centerOfBounds,
+  M as centerOfBoundsFromBounds,
+  R as centerOfSize,
+  g as doesFitWithin,
+  H as equalCoords,
+  Y as pickZone,
+  D as place
+};
+//# sourceMappingURL=Positioning.js.map

package/components/Tooltip/utils/useTooltipTheme.js

@@ -0,0 +1,31 @@
+import { useEffect as i } from "react";
+import "../../DesignTokens/DesignTokensComponents.js";
+import "../../DesignTokens/DesignTokensComponentsThemeDark.js";
+import "../../ThemeProvider/ThemeProviderContext.js";
+import { useToken as m } from "../../ThemeProvider/useToken.js";
+function g(e, s) {
+  const { scopeClassName: t } = m();
+  i(() => {
+    if (t && s) {
+      const o = s.classList;
+      e ? (o.contains(t) || o.add(t), r(s, t)) : o.contains(t) && u(s, t) <= 0 && window.setTimeout(() => {
+        o.remove(t);
+      }, 500);
+    }
+  }, [t, e, s]), i(() => () => {
+    const o = s.classList;
+    o.contains(t) && u(s, t) <= 0 && o.remove(t);
+  }, [s, t]);
+}
+function r(e, s) {
+  const t = `data-tooltip-theme-${s}-counter`, o = e.getAttribute(t), c = o ? parseInt(o, 10) + 1 : 1;
+  return e.setAttribute(t, c.toString()), c;
+}
+function u(e, s) {
+  const t = `data-tooltip-theme-${s}-counter`, o = e.getAttribute(t), c = o ? parseInt(o, 10) - 1 : 0;
+  return c > 0 ? e.setAttribute(t, c.toString()) : e.removeAttribute(t), c;
+}
+export {
+  g as useTooltipTheme
+};
+//# sourceMappingURL=useTooltipTheme.js.map

package/components/Typography/Caption.js

@@ -0,0 +1,54 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { c as y } from "../../chunks/vendor-CF2m175I.js";
+import { EFontWeightText as e, ECaptionSize as c, EFontType as T } from "./enums.js";
+import { t as s, m as b } from "../../chunks/utils-VD40Qwop.js";
+const R = "caption__13694852", E = "regular__5eaf5817", u = "semibold__ebfbc5a3", x = "c1__d90aca22", S = "c2__7618a56e", h = "d1__afe3b41b", o = {
+  caption: R,
+  regular: E,
+  semibold: u,
+  c1: x,
+  c2: S,
+  d1: h
+}, F = {
+  [e.REGULAR]: o.regular,
+  [e.SEMIBOLD]: o.semibold
+}, A = {
+  [c.C1]: o.c1,
+  [c.C2]: o.c2,
+  [c.D1]: o.d1
+}, L = g(
+  ({
+    children: n,
+    className: p,
+    size: r,
+    tag: i = "span",
+    type: m = T.PRIMARY,
+    weight: l = e.REGULAR,
+    underline: t,
+    strikethrough: a,
+    ...C
+  }, _) => {
+    const d = y(
+      s.typography,
+      o.caption,
+      A[r],
+      b[m],
+      F[l],
+      {
+        [s.strikethrough]: !!a && !t,
+        [s.underline]: !!t && !a,
+        [s.underlineStrikethrough]: !!a && !!t
+      },
+      p
+    );
+    return /* @__PURE__ */ f(i, { ref: _, className: d, ...C, children: n });
+  }
+);
+L.displayName = "Caption";
+export {
+  L as Caption,
+  A as mapCaptionSizeToCssClass,
+  F as mapFontWeightTextToCssClass
+};
+//# sourceMappingURL=Caption.js.map

package/components/Typography/Text.js

@@ -0,0 +1,62 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as y } from "react";
+import { c as g } from "../../chunks/vendor-CF2m175I.js";
+import { ETextSize as e, EFontWeightText as b, ELineType as r, EFontType as C } from "./enums.js";
+import { t, m as R } from "../../chunks/utils-VD40Qwop.js";
+const E = "text__db5a2ad3", L = "regular__5eaf5817", A = "semibold__ebfbc5a3", u = "b1__5fd5e8bd", B = "b2__e0cd448c", M = "b3__e2605073", S = "b4__d61c0f6b", s = {
+  text: E,
+  regular: L,
+  semibold: A,
+  b1: u,
+  b2: B,
+  b3: M,
+  b4: S
+}, h = {
+  [e.B1]: s.b1,
+  [e.B2]: s.b2,
+  [e.B3]: s.b3,
+  [e.B4]: s.b4
+}, F = {
+  [b.REGULAR]: s.regular,
+  [b.SEMIBOLD]: s.semibold
+}, N = {
+  [r.NORMAL]: "",
+  [r.COMPACT]: t.compact
+}, O = y(
+  ({
+    children: c,
+    className: m,
+    size: n,
+    tag: p = "span",
+    type: l = C.PRIMARY,
+    weight: T = b.REGULAR,
+    line: i = r.NORMAL,
+    underline: o,
+    strikethrough: a,
+    ...x
+  }, _) => {
+    const d = g(
+      t.typography,
+      s.text,
+      h[n],
+      R[l],
+      F[T],
+      N[i],
+      {
+        [t.strikethrough]: !!a && !o,
+        [t.underline]: !!o && !a,
+        [t.underlineStrikethrough]: !!a && !!o
+      },
+      m
+    );
+    return /* @__PURE__ */ f(p, { ref: _, className: d, ...x, children: c });
+  }
+);
+O.displayName = "Text";
+export {
+  O as Text,
+  F as mapFontWeightTextToCssClass,
+  N as mapTextLineTypeToCssClass,
+  h as mapTextSizeToCssClass
+};
+//# sourceMappingURL=Text.js.map

package/components/Typography/Title.js

@@ -0,0 +1,58 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as T } from "react";
+import { c as b } from "../../chunks/vendor-CF2m175I.js";
+import { ETitleSize as a, EFontWeightTitle as o, EFontType as g } from "./enums.js";
+import { t as s, m as u } from "../../chunks/utils-VD40Qwop.js";
+const y = "title__cb52ba0a", E = "regular__5eaf5817", C = "semibold__ebfbc5a3", S = "medium__ffa29861", M = "bold__2346c450", R = "h1__3f84978c", D = "h2__5c65e98c", F = "h3__03e6f499", t = {
+  title: y,
+  regular: E,
+  semibold: C,
+  medium: S,
+  bold: M,
+  h1: R,
+  h2: D,
+  h3: F
+}, I = {
+  [a.H1]: t.h1,
+  [a.H2]: t.h2,
+  [a.H3]: t.h3
+}, L = {
+  [o.MEDIUM]: t.medium,
+  [o.REGULAR]: t.regular,
+  [o.SEMIBOLD]: t.semibold,
+  [o.BOLD]: t.bold
+}, x = T(
+  ({
+    children: i,
+    className: r,
+    size: m,
+    tag: c = `${m}`,
+    type: n = g.PRIMARY,
+    weight: h = o.SEMIBOLD,
+    underline: e,
+    strikethrough: l,
+    ...p
+  }, _) => {
+    const d = b(
+      s.typography,
+      t.title,
+      I[m],
+      u[n],
+      L[h],
+      {
+        [s.strikethrough]: !!l && !e,
+        [s.underline]: !!e && !l,
+        [s.underlineStrikethrough]: !!l && !!e
+      },
+      r
+    );
+    return /* @__PURE__ */ f(c, { ref: _, className: d, ...p, children: i });
+  }
+);
+x.displayName = "Title";
+export {
+  x as Title,
+  L as mapFontWeightTitleToCssClass,
+  I as mapTitleSizeToCssClass
+};
+//# sourceMappingURL=Title.js.map

package/components/Typography/enums.js

@@ -0,0 +1,11 @@
+var a = /* @__PURE__ */ ((r) => (r.B1 = "B1", r.B2 = "B2", r.B3 = "B3", r.B4 = "B4", r))(a || {}), R = /* @__PURE__ */ ((r) => (r.C1 = "C1", r.C2 = "C2", r.D1 = "D1", r))(R || {}), B = /* @__PURE__ */ ((r) => (r.H1 = "h1", r.H2 = "h2", r.H3 = "h3", r))(B || {}), u = /* @__PURE__ */ ((r) => (r.PRIMARY = "primary", r.COMPLEMENTARY = "complementary", r.SECONDARY = "secondary", r.TERTIARY = "tertiary", r.DISABLED = "disabled", r.BRAND = "brand", r.INFO = "info", r.SUCCESS = "success", r.WARNING = "warning", r.ERROR = "error", r.SYSTEM = "system", r))(u || {}), A = /* @__PURE__ */ ((r) => (r.REGULAR = "regular", r.SEMIBOLD = "semibold", r))(A || {}), m = /* @__PURE__ */ ((r) => (r.MEDIUM = "medium", r.REGULAR = "regular", r.SEMIBOLD = "semibold", r.BOLD = "bold", r))(m || {}), D = /* @__PURE__ */ ((r) => (r.NORMAL = "normal", r.COMPACT = "compact", r))(D || {});
+export {
+  R as ECaptionSize,
+  u as EFontType,
+  A as EFontWeightText,
+  m as EFontWeightTitle,
+  D as ELineType,
+  a as ETextSize,
+  B as ETitleSize
+};
+//# sourceMappingURL=enums.js.map

package/components/Typography/index.js

@@ -0,0 +1,17 @@
+import { Title as o } from "./Title.js";
+import { Text as p } from "./Text.js";
+import { Caption as T } from "./Caption.js";
+import { ECaptionSize as E, EFontType as n, EFontWeightText as f, EFontWeightTitle as m, ELineType as l, ETextSize as z, ETitleSize as F } from "./enums.js";
+export {
+  T as Caption,
+  E as ECaptionSize,
+  n as EFontType,
+  f as EFontWeightText,
+  m as EFontWeightTitle,
+  l as ELineType,
+  z as ETextSize,
+  F as ETitleSize,
+  p as Text,
+  o as Title
+};
+//# sourceMappingURL=index.js.map

package/components/Typography/types.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=types.js.map

package/components/Typography/utils.js

@@ -0,0 +1,6 @@
+import "./enums.js";
+import { m as p } from "../../chunks/utils-VD40Qwop.js";
+export {
+  p as mapFontTypeToCssClass
+};
+//# sourceMappingURL=utils.js.map

package/components/UploadZone/UploadZone.js

@@ -0,0 +1,10 @@
+import "react/jsx-runtime";
+import "react";
+import "react-dom/client";
+import "../../chunks/vendor-CF2m175I.js";
+import { a as e, U as i } from "./components/UploadZoneInput.js";
+export {
+  e as UploadZone,
+  i as UploadZoneContext
+};
+//# sourceMappingURL=UploadZone.js.map

package/components/UploadZone/components/UploadZoneInput.js

@@ -0,0 +1,143 @@
+var m = Object.defineProperty;
+var f = (s, r, e) => r in s ? m(s, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[r] = e;
+var o = (s, r, e) => f(s, typeof r != "symbol" ? r + "" : r, e);
+import { jsx as C, jsxs as A } from "react/jsx-runtime";
+import c, { createElement as l } from "react";
+import { createRoot as L } from "react-dom/client";
+import { c as h } from "../../../chunks/vendor-CF2m175I.js";
+const U = "uploadZone__4d93ecba", N = "uploadZoneDragArea__78ab5ceb", x = "uploadZoneContainerDragArea__d4f231c2", _ = "uploadZoneInput__442dd692", p = {
+  uploadZone: U,
+  uploadZoneDragArea: N,
+  uploadZoneContainerDragArea: x,
+  uploadZoneInput: _
+}, D = ({ className: s, ...r }) => {
+  const e = c.useContext(g), t = (a) => {
+    e.onChange(a.target.files, a);
+  }, n = (a) => {
+    a.currentTarget.value = "";
+  };
+  return /* @__PURE__ */ l(
+    "input",
+    {
+      ...r,
+      type: "file",
+      className: h(s, p.uploadZoneInput),
+      onChange: t,
+      onClick: n,
+      ref: e.setInputNode,
+      key: "uploadZoneInput"
+    }
+  );
+};
+D.displayName = "UploadZone";
+const g = c.createContext({
+  onChange: () => {
+  },
+  openUploadDialog: () => {
+  }
+});
+class u extends c.PureComponent {
+  constructor() {
+    super(...arguments);
+    // Описание - https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element.
+    // Если counter > 0 - означает, что перетаскиваемый объект в пределах окна браузера.
+    /** Каунтер для подсчёта drag-перемещений по странице. */
+    o(this, "counter", 0);
+    /** Элемент-обёртка для дроп-зоны. */
+    o(this, "dropZoneWrapperDiv", null);
+    o(this, "state", {
+      hoverOnDrag: !1,
+      inputNode: void 0
+    });
+    o(this, "addListeners", (e) => {
+      e && (e.addEventListener("dragenter", this.handleDragEnter), e.addEventListener("dragleave", this.handleDragLeave));
+    });
+    o(this, "removeListeners", (e) => {
+      e && (e.removeEventListener("dragenter", this.handleDragEnter), e.removeEventListener("dragleave", this.handleDragLeave));
+    });
+    o(this, "createDropZoneDiv", () => {
+      const { children: e, className: t, onChange: n, renderContainerContent: a, dropZoneContainer: v, ...d } = this.props, i = document.createElement("div");
+      return L(i).render(
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: h(p.uploadZoneContainerDragArea, t),
+            onDragOver: this.handlePreventDefault,
+            onDrop: this.fileDrop,
+            ...d,
+            key: "uploadZoneDragArea",
+            role: "none"
+          },
+          a == null ? void 0 : a()
+        )
+      ), i;
+    });
+    o(this, "handleAreaClick", (e) => {
+      e.stopPropagation(), this.openUploadDialog();
+    });
+    o(this, "openUploadDialog", () => {
+      const { inputNode: e } = this.state;
+      e == null || e.click();
+    });
+    o(this, "handlePreventDefault", (e) => {
+      const { onDragOver: t } = this.props;
+      e.preventDefault(), t == null || t(e);
+    });
+    o(this, "handleDragEnter", () => {
+      this.counter++, this.counter === 1 && this.setState({ hoverOnDrag: !0 });
+    });
+    o(this, "handleDragLeave", () => {
+      this.counter--, this.counter === 0 && this.setState({ hoverOnDrag: !1 });
+    });
+    o(this, "fileDrop", (e) => {
+      const { onDrop: t, onChange: n } = this.props;
+      e.preventDefault(), t == null || t(e), n(e.dataTransfer.files, e), this.setState({ hoverOnDrag: !1 }), this.counter = 0;
+    });
+  }
+  componentDidMount() {
+    this.addListeners(this.props.dropZoneContainer);
+  }
+  componentDidUpdate(e, t) {
+    const { dropZoneContainer: n } = this.props, { hoverOnDrag: a } = this.state;
+    n !== e.dropZoneContainer && (this.removeListeners(e.dropZoneContainer), this.addListeners(n)), a !== t.hoverOnDrag && n && (a ? (this.dropZoneWrapperDiv = this.createDropZoneDiv(), n.appendChild(this.dropZoneWrapperDiv)) : this.dropZoneWrapperDiv && n.removeChild(this.dropZoneWrapperDiv));
+  }
+  componentWillUnmount() {
+    this.removeListeners(this.props.dropZoneContainer);
+  }
+  render() {
+    const { children: e, className: t, onChange: n, renderContainerContent: a, dropZoneContainer: v, ...d } = this.props, { inputNode: i } = this.state;
+    return /* @__PURE__ */ C(
+      g.Provider,
+      {
+        value: {
+          inputNode: i,
+          onChange: n,
+          openUploadDialog: this.openUploadDialog,
+          setInputNode: (Z) => {
+            this.setState({ inputNode: Z });
+          }
+        },
+        children: /* @__PURE__ */ A("div", { className: p.uploadZone, "data-tx": "0.1.6", children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: h(p.uploadZoneDragArea, t),
+              onClick: this.handleAreaClick,
+              ...d,
+              key: "uploadZoneDragArea",
+              role: "none"
+            }
+          ),
+          e({ openUploadDialog: this.openUploadDialog })
+        ] })
+      }
+    );
+  }
+}
+o(u, "displayName", "UploadZone"), o(u, "Input", D);
+export {
+  g as U,
+  D as UploadZoneInput,
+  u as a
+};
+//# sourceMappingURL=UploadZoneInput.js.map

package/components/UploadZone/index.js

@@ -0,0 +1,6 @@
+import { a as e, U as n } from "./components/UploadZoneInput.js";
+export {
+  e as UploadZone,
+  n as UploadZoneContext
+};
+//# sourceMappingURL=index.js.map