@sberbusiness/triplex-next 0.1.9 → 1.1.0

package/components/ThemeProvider/ThemeProvider.js

@@ -1,26 +1,26 @@
 import { jsx as l } from "react/jsx-runtime";
-import { useState as c, useEffect as m } from "react";
-import { k as x, l as d, m as f } from "../../chunks/vendor-CF2m175I.js";
+import { useState as c, useEffect as i } from "react";
+import { n as x, o as d, q as f } from "../../chunks/vendor-D-uL_icH.js";
 import { DesignTokenUtils as S } from "../DesignTokens/DesignTokenUtils.js";
 import { ThemeProviderView as h } from "./components/ThemeProviderView.js";
 import { ETriplexNextTheme as u } from "./ETriplexNextTheme.js";
-const i = (t) => `${t}${Date.now()}${Math.floor(Math.random() * 1e6)}`, w = ({
+const m = (t) => `${t}${Date.now()}${Math.floor(Math.random() * 1e6)}`, w = ({
   children: t,
   scopeClassName: o,
   scopeRef: n,
   theme: r = u.LIGHT,
   tokens: s
 }) => {
-  const [e, a] = c(o || i("triplex-next-theme-"));
-  return m(() => {
-    a(o || i("triplex-next-theme-"));
-  }, [o]), m(() => {
+  const [e, a] = c(o || m("triplex-next-theme-"));
+  return i(() => {
+    a(o || m("triplex-next-theme-"));
+  }, [o]), i(() => {
     if (x()) {
       const p = `.${e} {${S.getStyle(r, s || {})}}`;
       d(p, `triplex-next-dynamic-tokens-${e}`);
     } else
       console.log("ThemeProvider", "SSR do not support dynamic theme with css variables.");
-  }, [e, r, s]), m(() => () => f(`triplex-next-dynamic-tokens-${e}`), [e]), /* @__PURE__ */ l(h, { scopeClassName: e, scopeRef: n, theme: r, tokens: s, children: t });
+  }, [e, r, s]), i(() => () => f(`triplex-next-dynamic-tokens-${e}`), [e]), /* @__PURE__ */ l(h, { scopeClassName: e, scopeRef: n, theme: r, tokens: s, children: t });
 };
 export {
   w as ThemeProvider

package/components/ThemeProvider/components/ThemeProviderView.js

@@ -5,14 +5,14 @@ import { ETriplexNextTheme as m } from "../ETriplexNextTheme.js";
 import { DesignTokensCore as D } from "../../DesignTokens/DesignTokensCore.js";
 import { DesignTokensCoreThemeDark as d } from "../../DesignTokens/DesignTokensCoreThemeDark.js";
 import { DesignTokensComponents as v } from "../../DesignTokens/DesignTokensComponents.js";
-import { DesignTokensComponentsThemeDark as x } from "../../DesignTokens/DesignTokensComponentsThemeDark.js";
-import { f as g } from "../../../chunks/vendor-CF2m175I.js";
+import { DesignTokensComponentsThemeDark as g } from "../../DesignTokens/DesignTokensComponentsThemeDark.js";
+import { g as x } from "../../../chunks/vendor-D-uL_icH.js";
 const I = ({
-  children: f,
+  children: s,
   scopeClassName: r,
   scopeRef: t,
   theme: e,
-  tokens: s
+  tokens: f
 }) => {
   const o = u("");
   k(() => {
@@ -22,13 +22,13 @@ const I = ({
       o.current && ((i = t.current) == null || i.classList.remove(o.current));
     };
   }, [r]);
-  const T = g(
+  const T = x(
     {},
-    s,
+    f,
     e === m.LIGHT ? D : d,
-    e === m.LIGHT ? v : x
+    e === m.LIGHT ? v : g
   );
-  return /* @__PURE__ */ p(c.Provider, { value: { scopeClassName: r, theme: e, tokens: T }, children: f });
+  return /* @__PURE__ */ p(c.Provider, { value: { scopeClassName: r, theme: e, tokens: T }, children: s });
 };
 export {
   I as ThemeProviderView

package/components/Tooltip/components/common/TooltipBody.js

@@ -1,13 +1,13 @@
 import { jsx as o } from "react/jsx-runtime";
 import r from "react";
-import { MobileView as s } from "../../../MobileView/MobileView.js";
-import { Text as a } from "../../../Typography/Text.js";
-import { ELineType as l, ETextSize as p } from "../../../Typography/enums.js";
-import { c } from "../../../../chunks/vendor-CF2m175I.js";
-import { s as f } from "../../../../chunks/TooltipDesktop.module-CvcpQSlC.js";
+import { c as s } from "../../../../chunks/vendor-D-uL_icH.js";
+import { MobileView as a } from "../../../MobileView/MobileView.js";
+import { Text as l } from "../../../Typography/Text.js";
+import { ELineType as p, ETextSize as c } from "../../../Typography/enums.js";
+import { s as f } from "../../../../chunks/TooltipDesktop.module-DTbnIWo1.js";
 const d = r.forwardRef(({ className: m, ...i }, t) => {
-  const e = c(f.tooltipBody, m);
-  return /* @__PURE__ */ o(s, { fallback: /* @__PURE__ */ o("div", { className: e, ...i, ref: t }), children: /* @__PURE__ */ o(a, { className: e, size: p.B3, line: l.NORMAL, tag: "div", ...i, ref: t }) });
+  const e = s(f.tooltipBody, m);
+  return /* @__PURE__ */ o(a, { fallback: /* @__PURE__ */ o("div", { className: e, ...i, ref: t }), children: /* @__PURE__ */ o(l, { className: e, size: c.B3, line: p.NORMAL, tag: "div", ...i, ref: t }) });
 });
 d.displayName = "TooltipBody";
 export {

package/components/Tooltip/components/common/TooltipLink.js

@@ -1,18 +1,18 @@
 import { jsx as t } from "react/jsx-runtime";
 import n from "react";
-import { c as s } from "../../../../chunks/vendor-CF2m175I.js";
+import { c as s } from "../../../../chunks/vendor-D-uL_icH.js";
 import { MobileView as a } from "../../../MobileView/MobileView.js";
-const k = "tooltipLink__7f9e1238", r = "desktop__558576b3", m = "mobile__4403db34", o = {
-  tooltipLink: k,
-  desktop: r,
-  mobile: m
-}, d = n.forwardRef(
+const d = "tooltipLink__4dd334d4", k = "desktop__d5f381d9", r = "mobile__76847c64", o = {
+  tooltipLink: d,
+  desktop: k,
+  mobile: r
+}, m = n.forwardRef(
   ({ children: i, className: e, ...l }, p) => /* @__PURE__ */ t(a, { fallback: /* @__PURE__ */ t(
     "a",
     {
       className: s(o.tooltipLink, o.desktop, e),
       ...l,
-      "data-tx": "0.1.9",
+      "data-tx": "1.1.0",
       ref: p,
       children: i
     }
@@ -21,14 +21,14 @@ const k = "tooltipLink__7f9e1238", r = "desktop__558576b3", m = "mobile__4403db3
     {
       className: s(o.tooltipLink, o.mobile, e),
       ...l,
-      "data-tx": "0.1.9",
+      "data-tx": "1.1.0",
       ref: p,
       children: i
     }
   ) })
 );
-d.displayName = "TooltipLink";
+m.displayName = "TooltipLink";
 export {
-  d as TooltipLink
+  m as TooltipLink
 };
 //# sourceMappingURL=TooltipLink.js.map

package/components/Tooltip/components/common/TooltipXButton.js

@@ -3,7 +3,7 @@ import { useContext as p } from "react";
 import { CrossStrokeSrvIcon16 as n } from "@sberbusiness/icons-next";
 import { TooltipContext as i } from "../../TootlipContext.js";
 import { ButtonIcon as l } from "../../../Button/ButtonIcon.js";
-import { s as f } from "../../../../chunks/TooltipDesktop.module-CvcpQSlC.js";
+import { s as f } from "../../../../chunks/TooltipDesktop.module-DTbnIWo1.js";
 const I = ({ onClick: t, ...r }) => {
   const { setTooltipOpen: e } = p(i), s = (m) => {
     e(!1), t == null || t(m);

package/components/Tooltip/components/desktop/components/TooltipDesktopBase.js

@@ -3,13 +3,13 @@ var H = (p, a, i) => a in p ? _(p, a, { enumerable: !0, configurable: !0, writab
 var t = (p, a, i) => H(p, typeof a != "symbol" ? a + "" : a, i);
 import { jsxs as S, Fragment as P, jsx as x } from "react/jsx-runtime";
 import O from "react";
-import { i as M, c as $ } from "../../../../../chunks/vendor-CF2m175I.js";
+import { i as M, c as $ } from "../../../../../chunks/vendor-D-uL_icH.js";
 import { TooltipContext as X } from "../../../TootlipContext.js";
 import { Portal as Y } from "../../../../Portal/Portal.js";
 import { ETooltipPreferPlace as u, ETooltipDirection as B, ETooltipAlign as z, ETooltipFlowTypes as I, ETooltipSizeParameter as r, ETooltipTypeName as C, ETooltipEndCoordinates as N, ETooltipStartCoordinates as R, ETooltipAxesType as G, ETooltipSize as U } from "../../../enums.js";
 import { TooltipDesktopTip as V } from "./TooltipDesktopTip.js";
 import { pickZone as j, axes as q, calcRelPos as K, centerOfBoundsFromBounds as Z, calcBounds as L, equalCoords as J } from "../../../utils/Positioning.js";
-import { s as f } from "../../../../../chunks/TooltipDesktop.module-CvcpQSlC.js";
+import { s as f } from "../../../../../chunks/TooltipDesktop.module-DTbnIWo1.js";
 const Q = {
   column: "translateX",
   row: "translateY"

package/components/Tooltip/components/desktop/components/TooltipDesktopTip.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import p from "react";
 import { ETooltipDirection as e } from "../../../enums.js";
-import { c } from "../../../../../chunks/vendor-CF2m175I.js";
-import { s as t } from "../../../../../chunks/TooltipDesktop.module-CvcpQSlC.js";
+import { c } from "../../../../../chunks/vendor-D-uL_icH.js";
+import { s as t } from "../../../../../chunks/TooltipDesktop.module-DTbnIWo1.js";
 const l = p.forwardRef((r, i) => {
   const { direction: s } = r;
   let o;

package/components/Tooltip/components/mobile/TooltipMobile.js

@@ -5,26 +5,26 @@ import { Portal as x } from "../../../Portal/Portal.js";
 import { DropdownMobile as _ } from "../../../Dropdown/mobile/DropdownMobile.js";
 import { DropdownMobileBody as h } from "../../../Dropdown/mobile/DropdownMobileBody.js";
 import { TooltipMobileCloseButton as y } from "./components/TooltipMobileCloseButton.js";
-import { c as B } from "../../../../chunks/vendor-CF2m175I.js";
-const T = "tooltipMobile__5a4b582f", g = "tooltipMobileContent__b145fdc1", H = "headerless__d68fc936", r = {
+import { c as B } from "../../../../chunks/vendor-D-uL_icH.js";
+const T = "tooltipMobile__bf2a5b68", g = "tooltipMobileContent__fc5d1607", H = "headerless__9af8f435", r = {
   tooltipMobile: T,
   tooltipMobileContent: g,
   headerless: H
 }, z = ({
   children: N,
-  className: d,
+  className: p,
   renderContainer: R,
   targetRef: j,
   disableAdaptiveMode: D,
   isOpen: o,
   onShow: t,
-  ...p
+  ...d
 }) => {
-  const { elements: e, setTooltipOpen: c } = f(C), i = u(null), m = B(r.tooltipMobile, { [r.headerless]: e.mobileHeader === null }, d);
+  const { elements: e, setTooltipOpen: a } = f(C), i = u(null), c = B(r.tooltipMobile, { [r.headerless]: e.mobileHeader === null }, p);
   M(() => {
     o && (t == null || t(i.current));
   }, [o]);
-  const a = () => {
+  const m = () => {
     var n;
     return /* @__PURE__ */ s(y, { ...(n = e.closeButton) == null ? void 0 : n.props });
   };
@@ -33,18 +33,18 @@ const T = "tooltipMobile__5a4b582f", g = "tooltipMobileContent__b145fdc1", H = "
     /* @__PURE__ */ s(x, { container: document.body, children: /* @__PURE__ */ l(
       _,
       {
-        className: m,
+        className: c,
         tabIndex: -1,
         opened: o,
-        setOpened: c,
-        ...p,
+        setOpened: a,
+        ...d,
         ref: i,
         children: [
           e.mobileHeader,
           /* @__PURE__ */ l(h, { className: r.tooltipMobileContent, children: [
             e.body,
             e.link,
-            e.mobileHeader === null && a()
+            e.mobileHeader === null && m()
           ] })
         ]
       }

package/components/Typography/Caption.js

@@ -1,11 +1,11 @@
-import { jsx as _ } 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 R } from "../../chunks/utils-9a4dp5-W.js";
-const E = "caption__f0dfc92e", b = "regular__e92902df", u = "semibold__c8b11dd7", x = "c1__13266d59", S = "c2__29ae0e07", h = "d1__f93c356f", o = {
-  caption: E,
-  regular: b,
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { c as g } from "../../chunks/vendor-D-uL_icH.js";
+import { EFontWeightText as e, ECaptionSize as c, EFontType as y } from "./enums.js";
+import { t as s, m as T } from "../../chunks/utils-B0khB-Lq.js";
+const R = "caption__a0232eb3", E = "regular__b1f2b305", u = "semibold__c23bf0b4", x = "c1__8665eae4", S = "c2__cf697a46", h = "d1__8ff8abd4", o = {
+  caption: R,
+  regular: E,
   semibold: u,
   c1: x,
   c2: S,
@@ -17,23 +17,23 @@ const E = "caption__f0dfc92e", b = "regular__e92902df", u = "semibold__c8b11dd7"
   [c.C1]: o.c1,
   [c.C2]: o.c2,
   [c.D1]: o.d1
-}, L = g(
+}, L = b(
   ({
     children: n,
     className: p,
     size: r,
     tag: i = "span",
-    type: m = T.PRIMARY,
+    type: m = y.PRIMARY,
     weight: l = e.REGULAR,
     underline: t,
     strikethrough: a,
-    ...d
-  }, f) => {
-    const C = y(
+    ...f
+  }, C) => {
+    const _ = g(
       s.typography,
       o.caption,
       A[r],
-      R[m],
+      T[m],
       F[l],
       {
         [s.strikethrough]: !!a && !t,
@@ -42,7 +42,7 @@ const E = "caption__f0dfc92e", b = "regular__e92902df", u = "semibold__c8b11dd7"
       },
       p
     );
-    return /* @__PURE__ */ _(i, { ref: f, className: C, ...d, children: n });
+    return /* @__PURE__ */ d(i, { ref: C, className: _, ...f, children: n });
   }
 );
 L.displayName = "Caption";

package/components/Typography/Text.js

@@ -1,9 +1,9 @@
-import { jsx as d } from "react/jsx-runtime";
+import { jsx as y } from "react/jsx-runtime";
 import { forwardRef as g } from "react";
-import { c as C } from "../../chunks/vendor-CF2m175I.js";
-import { ETextSize as e, EFontWeightText as c, ELineType as r, EFontType as f } from "./enums.js";
-import { t, m as R } from "../../chunks/utils-9a4dp5-W.js";
-const E = "text__e2739459", L = "regular__e92902df", A = "semibold__c8b11dd7", u = "b1__fb0a3449", B = "b2__ec59cb85", M = "b3__013e436c", S = "b4__719bd6c3", s = {
+import { c as C } from "../../chunks/vendor-D-uL_icH.js";
+import { ETextSize as o, EFontWeightText as b, ELineType as c, EFontType as R } from "./enums.js";
+import { t, m as d } from "../../chunks/utils-B0khB-Lq.js";
+const E = "text__77006390", L = "regular__b1f2b305", A = "semibold__c23bf0b4", u = "b1__cef053ea", B = "b2__5c9700c6", M = "b3__202d1cb8", S = "b4__bb326c0f", s = {
   text: E,
   regular: L,
   semibold: A,
@@ -12,44 +12,44 @@ const E = "text__e2739459", L = "regular__e92902df", A = "semibold__c8b11dd7", u
   b3: M,
   b4: S
 }, h = {
-  [e.B1]: s.b1,
-  [e.B2]: s.b2,
-  [e.B3]: s.b3,
-  [e.B4]: s.b4
+  [o.B1]: s.b1,
+  [o.B2]: s.b2,
+  [o.B3]: s.b3,
+  [o.B4]: s.b4
 }, F = {
-  [c.REGULAR]: s.regular,
-  [c.SEMIBOLD]: s.semibold
+  [b.REGULAR]: s.regular,
+  [b.SEMIBOLD]: s.semibold
 }, N = {
-  [r.NORMAL]: "",
-  [r.COMPACT]: t.compact
+  [c.NORMAL]: "",
+  [c.COMPACT]: t.compact
 }, O = g(
   ({
-    children: b,
+    children: r,
     className: m,
     size: n,
     tag: p = "span",
-    type: l = f.PRIMARY,
-    weight: T = c.REGULAR,
-    line: i = r.NORMAL,
-    underline: o,
+    type: l = R.PRIMARY,
+    weight: T = b.REGULAR,
+    line: i = c.NORMAL,
+    underline: e,
     strikethrough: a,
     ...x
   }, _) => {
-    const y = C(
+    const f = C(
       t.typography,
       s.text,
       h[n],
-      R[l],
+      d[l],
       F[T],
       N[i],
       {
-        [t.strikethrough]: !!a && !o,
-        [t.underline]: !!o && !a,
-        [t.underlineStrikethrough]: !!a && !!o
+        [t.strikethrough]: !!a && !e,
+        [t.underline]: !!e && !a,
+        [t.underlineStrikethrough]: !!a && !!e
       },
       m
     );
-    return /* @__PURE__ */ d(p, { ref: _, className: y, ...x, children: b });
+    return /* @__PURE__ */ y(p, { ref: _, className: f, ...x, children: r });
   }
 );
 O.displayName = "Text";

package/components/Typography/Title.js

@@ -1,9 +1,9 @@
-import { jsx as b } from "react/jsx-runtime";
+import { jsx as _ } from "react/jsx-runtime";
 import { forwardRef as T } from "react";
-import { c as f } from "../../chunks/vendor-CF2m175I.js";
+import { c as f } from "../../chunks/vendor-D-uL_icH.js";
 import { ETitleSize as m, EFontWeightTitle as o, EFontType as g } from "./enums.js";
-import { t as s, m as u } from "../../chunks/utils-9a4dp5-W.js";
-const y = "title__63dd0a64", E = "regular__e92902df", C = "semibold__c8b11dd7", S = "medium__3d1223ab", M = "bold__a576642e", R = "h1__0fdb64db", D = "h2__9b32bfc2", F = "h3__85d25fbe", t = {
+import { t as s, m as u } from "../../chunks/utils-B0khB-Lq.js";
+const y = "title__850984cd", E = "regular__b1f2b305", C = "semibold__c23bf0b4", S = "medium__df283fb2", M = "bold__9b12ae0a", R = "h1__4845788b", D = "h2__80b774c2", F = "h3__8f42a1c0", t = {
   title: y,
   regular: E,
   semibold: C,
@@ -26,19 +26,19 @@ const y = "title__63dd0a64", E = "regular__e92902df", C = "semibold__c8b11dd7",
     children: a,
     className: r,
     size: i,
-    tag: d = `${i}`,
-    type: c = g.PRIMARY,
-    weight: n = o.SEMIBOLD,
+    tag: c = `${i}`,
+    type: n = g.PRIMARY,
+    weight: b = o.SEMIBOLD,
     underline: e,
     strikethrough: l,
-    ...h
-  }, p) => {
-    const _ = f(
+    ...d
+  }, h) => {
+    const p = f(
       s.typography,
       t.title,
       I[i],
-      u[c],
-      L[n],
+      u[n],
+      L[b],
       {
         [s.strikethrough]: !!l && !e,
         [s.underline]: !!e && !l,
@@ -46,7 +46,7 @@ const y = "title__63dd0a64", E = "regular__e92902df", C = "semibold__c8b11dd7",
       },
       r
     );
-    return /* @__PURE__ */ b(d, { ref: p, className: _, ...h, children: a });
+    return /* @__PURE__ */ _(c, { ref: h, className: p, ...d, children: a });
   }
 );
 x.displayName = "Title";

package/components/Typography/utils.js

@@ -1,5 +1,5 @@
 import "./enums.js";
-import { m as p } from "../../chunks/utils-9a4dp5-W.js";
+import { m as p } from "../../chunks/utils-B0khB-Lq.js";
 export {
   p as mapFontTypeToCssClass
 };

package/components/UploadZone/UploadZone.js

@@ -1,10 +1,112 @@
-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";
+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 { createRoot as C } from "react-dom/client";
+import { c as h } from "../../chunks/vendor-D-uL_icH.js";
+import { U as L, s as d } from "../../chunks/UploadZoneInput-R9729LZY.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(i).render(
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: h(d.uploadZoneContainerDragArea, r),
+            onDragOver: this.handlePreventDefault,
+            onDrop: this.fileDrop,
+            ...p,
+            key: "uploadZoneDragArea",
+            role: "none"
+          },
+          a == null ? void 0 : a()
+        )
+      ), 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,
+      {
+        value: {
+          inputNode: i,
+          onChange: o,
+          openUploadDialog: this.openUploadDialog,
+          setInputNode: (v) => {
+            this.setState({ inputNode: v });
+          }
+        },
+        children: /* @__PURE__ */ f("div", { className: d.uploadZone, "data-tx": "1.1.0", children: [
+          /* @__PURE__ */ l(
+            "div",
+            {
+              className: h(d.uploadZoneDragArea, r),
+              onClick: this.handleAreaClick,
+              ...p,
+              key: "uploadZoneDragArea",
+              role: "none"
+            }
+          ),
+          e({ openUploadDialog: this.openUploadDialog })
+        ] })
+      }
+    );
+  }
+}
+t(c, "displayName", "UploadZone"), t(c, "Input", L);
 export {
-  e as UploadZone,
-  i as UploadZoneContext
+  c as UploadZone
 };
 //# sourceMappingURL=UploadZone.js.map

package/components/UploadZone/UploadZoneContext.js

@@ -0,0 +1,11 @@
+import o from "react";
+const t = o.createContext({
+  onChange: () => {
+  },
+  openUploadDialog: () => {
+  }
+});
+export {
+  t as UploadZoneContext
+};
+//# sourceMappingURL=UploadZoneContext.js.map