@sberbusiness/triplex-next 0.10.0 → 0.12.0

package/components/UploadZone/UploadZone.js

@@ -1,113 +1,125 @@
-var m = Object.defineProperty;
-var u = (s, n, e) => n in s ? m(s, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[n] = e;
-var t = (s, n, e) => u(s, typeof n != "symbol" ? n + "" : n, e);
-import { jsx as g, jsxs as f } from "react/jsx-runtime";
-import Z, { createElement as l } from "react";
-import C from "react-dom";
-import { c as h } from "../../chunks/vendor-BlJo2ILB.js";
-import { U as L, s as d } from "../../chunks/UploadZoneInput-CQ9bTi-y.js";
-import { UploadZoneContext as U } from "./UploadZoneContext.js";
-class c extends Z.PureComponent {
-  constructor() {
-    super(...arguments);
-    // Описание - https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element.
-    // Если counter > 0 - означает, что перетаскиваемый объект в пределах окна браузера.
-    /** Каунтер для подсчёта drag-перемещений по странице. */
-    t(this, "counter", 0);
-    /** Элемент-обёртка для дроп-зоны. */
-    t(this, "dropZoneWrapperDiv", null);
-    t(this, "state", {
-      hoverOnDrag: !1,
-      inputNode: void 0
-    });
-    t(this, "addListeners", (e) => {
-      e && (e.addEventListener("dragenter", this.handleDragEnter), e.addEventListener("dragleave", this.handleDragLeave));
-    });
-    t(this, "removeListeners", (e) => {
-      e && (e.removeEventListener("dragenter", this.handleDragEnter), e.removeEventListener("dragleave", this.handleDragLeave));
-    });
-    t(this, "createDropZoneDiv", () => {
-      const { children: e, className: r, onChange: o, renderContainerContent: a, dropZoneContainer: D, ...p } = this.props, i = document.createElement("div");
-      return C.render(
-        /* @__PURE__ */ l(
+import { jsx as t, jsxs as g } from "react/jsx-runtime";
+import { forwardRef as B, useState as L, useRef as M, useCallback as o, createElement as z, useEffect as C } from "react";
+import I from "react-dom";
+import { c as R } from "../../chunks/vendor-BARd5eYq.js";
+import { s as n, U as j } from "../../chunks/UploadZoneInput-ZvLsxymO.js";
+import { UploadZoneContext as w } from "./UploadZoneContext.js";
+import { MobileView as P } from "../MobileView/MobileView.js";
+import { Button as V } from "../Button/Button.js";
+import "../Button/ButtonBase.js";
+import "../Button/ButtonIcon.js";
+import "../Button/ButtonDropdown.js";
+import "../Button/ButtonDropdownExtended.js";
+import { EButtonTheme as W } from "../Button/enums.js";
+import { EComponentSize as Y } from "../../enums/EComponentSize.js";
+import "../Typography/Title.js";
+import { Text as q } from "../Typography/Text.js";
+import "../Typography/Caption.js";
+import { ETextSize as F } from "../Typography/enums.js";
+import { HelpBox as G } from "../HelpBox/HelpBox.js";
+import "../Tooltip/Tooltip.js";
+import { ETooltipSize as J } from "../Tooltip/enums.js";
+const K = Object.assign(
+  B((H, E) => {
+    const {
+      dropZoneContainer: r,
+      children: Z,
+      className: f,
+      onChange: v,
+      renderContainerContent: i,
+      onDrop: l,
+      onDragOver: s,
+      ...D
+    } = H, [x, h] = L(!1), [c, O] = L(void 0), a = M(0), p = M(null), d = o(() => {
+      a.current += 1, a.current === 1 && h(!0);
+    }, []), m = o(() => {
+      a.current -= 1, a.current === 0 && h(!1);
+    }, []), k = o(
+      (e) => {
+        e && (e.addEventListener("dragenter", d), e.addEventListener("dragleave", m));
+      },
+      [d, m]
+    ), b = o(
+      (e) => {
+        e && (e.removeEventListener("dragenter", d), e.removeEventListener("dragleave", m));
+      },
+      [d, m]
+    ), N = o(
+      (e) => {
+        e.preventDefault(), s == null || s(e);
+      },
+      [s]
+    ), S = o(
+      (e) => {
+        e.preventDefault(), l == null || l(e), v(e.dataTransfer.files, e), h(!1), a.current = 0;
+      },
+      [v, l]
+    ), U = o(() => {
+      const e = document.createElement("div");
+      return I.render(
+        /* @__PURE__ */ z(
           "div",
           {
-            className: h(d.uploadZoneContainerDragArea, r),
-            onDragOver: this.handlePreventDefault,
-            onDrop: this.fileDrop,
-            ...p,
+            className: R(n.uploadZoneContainerDragArea, f),
+            onDragOver: N,
+            onDrop: S,
+            ...D,
             key: "uploadZoneDragArea",
             role: "none"
           },
-          a == null ? void 0 : a()
+          i == null ? void 0 : i()
         ),
-        i
-      ), i;
-    });
-    t(this, "handleAreaClick", (e) => {
-      e.stopPropagation(), this.openUploadDialog();
-    });
-    t(this, "openUploadDialog", () => {
-      const { inputNode: e } = this.state;
-      e == null || e.click();
-    });
-    t(this, "handlePreventDefault", (e) => {
-      const { onDragOver: r } = this.props;
-      e.preventDefault(), r == null || r(e);
-    });
-    t(this, "handleDragEnter", () => {
-      this.counter++, this.counter === 1 && this.setState({ hoverOnDrag: !0 });
-    });
-    t(this, "handleDragLeave", () => {
-      this.counter--, this.counter === 0 && this.setState({ hoverOnDrag: !1 });
-    });
-    t(this, "fileDrop", (e) => {
-      const { onDrop: r, onChange: o } = this.props;
-      e.preventDefault(), r == null || r(e), o(e.dataTransfer.files, e), this.setState({ hoverOnDrag: !1 }), this.counter = 0;
-    });
-  }
-  componentDidMount() {
-    this.addListeners(this.props.dropZoneContainer);
-  }
-  componentDidUpdate(e, r) {
-    const { dropZoneContainer: o } = this.props, { hoverOnDrag: a } = this.state;
-    o !== e.dropZoneContainer && (this.removeListeners(e.dropZoneContainer), this.addListeners(o)), a !== r.hoverOnDrag && o && (a ? (this.dropZoneWrapperDiv = this.createDropZoneDiv(), o.appendChild(this.dropZoneWrapperDiv)) : this.dropZoneWrapperDiv && o.removeChild(this.dropZoneWrapperDiv));
-  }
-  componentWillUnmount() {
-    this.removeListeners(this.props.dropZoneContainer);
-  }
-  render() {
-    const { children: e, className: r, onChange: o, renderContainerContent: a, dropZoneContainer: D, ...p } = this.props, { inputNode: i } = this.state;
-    return /* @__PURE__ */ g(
-      U.Provider,
+        e
+      ), e;
+    }, [f, N, S, i, D]);
+    C(() => (k(r), () => {
+      b(r);
+    }), [r, k, b]), C(() => {
+      r && (x ? (p.current = U(), r.appendChild(p.current)) : p.current && r.removeChild(p.current));
+    }, [x, r, U]);
+    const u = () => {
+      c == null || c.click();
+    }, A = (e) => {
+      e.stopPropagation(), u();
+    }, T = () => /* @__PURE__ */ g("div", { className: n.uploadZoneDesktop, "data-tx": "0.12.0", ref: E, children: [
+      /* @__PURE__ */ z(
+        "div",
+        {
+          className: R(n.uploadZoneDragArea, f),
+          onClick: A,
+          ...D,
+          key: "uploadZoneDragArea",
+          role: "none"
+        }
+      ),
+      Z({ openUploadDialog: u })
+    ] }), y = () => /* @__PURE__ */ g("div", { className: n.uploadZoneMobile, "data-tx": "0.12.0", ref: E, children: [
+      /* @__PURE__ */ g("div", { className: n.uploadZoneMobileHeader, children: [
+        /* @__PURE__ */ t(q, { size: F.B3, children: "Файлы для импорта" }),
+        /* @__PURE__ */ t(G, { tooltipSize: J.SM, children: "Helpbox text" })
+      ] }),
+      /* @__PURE__ */ t("div", { className: n.uploadZoneInput, children: Z({ openUploadDialog: u }) }),
+      /* @__PURE__ */ t(V, { theme: W.SECONDARY, size: Y.SM, onClick: A, children: "Загрузить" })
+    ] });
+    return /* @__PURE__ */ t(
+      w.Provider,
       {
         value: {
-          inputNode: i,
-          onChange: o,
-          openUploadDialog: this.openUploadDialog,
-          setInputNode: (v) => {
-            this.setState({ inputNode: v });
-          }
+          inputNode: c,
+          onChange: v,
+          openUploadDialog: u,
+          setInputNode: O
         },
-        children: /* @__PURE__ */ f("div", { className: d.uploadZone, "data-tx": "0.10.0", children: [
-          /* @__PURE__ */ l(
-            "div",
-            {
-              className: h(d.uploadZoneDragArea, r),
-              onClick: this.handleAreaClick,
-              ...p,
-              key: "uploadZoneDragArea",
-              role: "none"
-            }
-          ),
-          e({ openUploadDialog: this.openUploadDialog })
-        ] })
+        children: /* @__PURE__ */ t(P, { fallback: T(), children: y() })
       }
     );
+  }),
+  {
+    Input: j
   }
-}
-t(c, "displayName", "UploadZone"), t(c, "Input", L);
+);
+K.displayName = "UploadZone";
 export {
-  c as UploadZone
+  K as UploadZone
 };
 //# sourceMappingURL=UploadZone.js.map

package/components/UploadZone/components/UploadZoneInput.js

@@ -1,7 +1,7 @@
 import "react";
 import "../UploadZoneContext.js";
-import "../../../chunks/vendor-BlJo2ILB.js";
-import { U as i } from "../../../chunks/UploadZoneInput-CQ9bTi-y.js";
+import "../../../chunks/vendor-BARd5eYq.js";
+import { U as i } from "../../../chunks/UploadZoneInput-ZvLsxymO.js";
 export {
   i as UploadZoneInput
 };

package/components/WindowResizeListener/WindowResizeListener.js

@@ -1,6 +1,6 @@
 import { jsx as s, Fragment as o } from "react/jsx-runtime";
 import { useEffect as m } from "react";
-import { t as d } from "../../chunks/vendor-BlJo2ILB.js";
+import { t as d } from "../../chunks/vendor-BARd5eYq.js";
 const w = ({
   children: t,
   onResize: r,