@hai-dev/ui-kit 1.1.12 → 1.2.0

package/dist/components/photo-crop-uploader/components/upload-dialog/upload-dialog.js

@@ -1,49 +1,51 @@
-import { jsxs as L, jsx as a, Fragment as $ } from "react/jsx-runtime";
-import * as w from "react";
-import { S as V } from "../../../../index-CcueJ2sD.js";
+import { jsxs as S, jsx as r, Fragment as Z } from "react/jsx-runtime";
+import * as O from "react";
+import { useState as q, useCallback as G } from "react";
+import { useScaledMinDimension as J } from "./use-scaled-min-dimension.js";
+import { S as Q } from "../../../../index-CcueJ2sD.js";
 import { c as i } from "../../../../index-YnD2EP-S.js";
-import { s as n, U as H } from "../../../../upload-dialog-errors-DHl0bh1n.js";
-import { PhotoList as Z } from "../photo-list/photo-list.js";
-import { localizedText as p } from "../../locale.js";
-import { EN_LOCALE as K, DARK_THEME as Y } from "../../../../constants.js";
-import { CLOSE_ICON_SIZE as D } from "./constants.js";
-import { DEFAULT_MIN_DIMENSION as q, DEFAULT_ASPECT_RATIO as G } from "../../constants.js";
-import { D as O } from "../../../../Dialog-Cf0d7zi7.js";
-import { a as A, b as P, D as J } from "../../../../DialogTitle-BtvmXSZP.js";
-import { CircularProgressLoader as Q } from "../../../circular-progress-loader/circular-progress-loader.js";
-import { g as X, a as oo, c as eo, b as m, P as t } from "../../../../createTheme-D8R2Cz2N.js";
-import { m as M } from "../../../../memoTheme-D5VCpQCz.js";
+import { s as n, U as X } from "../../../../upload-dialog-errors-CCRxzIZp.js";
+import { PhotoList as oo } from "../photo-list/photo-list.js";
+import { localizedText as g } from "../../locale.js";
+import { EN_LOCALE as eo, DARK_THEME as to } from "../../../../constants.js";
+import { DEFAULT_MIN_DIMENSION as ao, DEFAULT_ASPECT_RATIO as ro } from "../../constants.js";
+import '../../../../assets/inter.css';import '../../../../assets/upload-dialog.css';/* empty css                               */
+import { D as k } from "../../../../Dialog-BK9lMUKV.js";
+import { a as A, b as D, D as no } from "../../../../DialogTitle-ByUfLB5M.js";
+import { CircularProgressLoader as io } from "../../../circular-progress-loader/circular-progress-loader.js";
+import { g as so, a as lo, c as co, b as f, P as t } from "../../../../createTheme-BoOmbNvy.js";
+import { m as M } from "../../../../memoTheme-BYBJ2Fe6.js";
 import { c as U } from "../../../../createSimplePaletteValueFilter-B7--0ryQ.js";
-import { u as to, c as ao, s as _, b as ro } from "../../../../chainPropTypes-DiJb1lGa.js";
-import { u as no } from "../../../../useId-CK6Kn3Tn.js";
-import { B as io } from "../../../../ButtonBase-CSWuFxUv.js";
-import { C as lo } from "../../../../CircularProgress-sPARyPfh.js";
-import { Button as k } from "../../../button/button.js";
-import '../../../../assets/upload-dialog.css';function so(o) {
-  return X("MuiIconButton", o);
+import { u as po, c as go, s as j, b as uo } from "../../../../chainPropTypes-DgqFdXGi.js";
+import { u as mo } from "../../../../useId-CK6Kn3Tn.js";
+import { B as fo } from "../../../../ButtonBase-C4krg_zd.js";
+import { C as bo } from "../../../../CircularProgress-BoaEg4rF.js";
+import { Button as P } from "../../../button/button.js";
+function ho(o) {
+  return so("MuiIconButton", o);
 }
-const W = oo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), co = (o) => {
+const W = lo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary", "colorSecondary", "colorError", "colorInfo", "colorSuccess", "colorWarning", "edgeStart", "edgeEnd", "sizeSmall", "sizeMedium", "sizeLarge", "loading", "loadingIndicator", "loadingWrapper"]), Co = (o) => {
   const {
     classes: e,
-    disabled: r,
-    color: c,
-    edge: g,
-    size: f,
-    loading: b
-  } = o, u = {
-    root: ["root", b && "loading", r && "disabled", c !== "default" && `color${m(c)}`, g && `edge${m(g)}`, `size${m(f)}`],
+    disabled: a,
+    color: l,
+    edge: u,
+    size: b,
+    loading: c
+  } = o, m = {
+    root: ["root", c && "loading", a && "disabled", l !== "default" && `color${f(l)}`, u && `edge${f(u)}`, `size${f(b)}`],
     loadingIndicator: ["loadingIndicator"],
     loadingWrapper: ["loadingWrapper"]
   };
-  return ao(u, so, e);
-}, po = _(io, {
+  return go(m, ho, e);
+}, yo = j(fo, {
   name: "MuiIconButton",
   slot: "Root",
   overridesResolver: (o, e) => {
     const {
-      ownerState: r
+      ownerState: a
     } = o;
-    return [e.root, r.loading && e.loading, r.color !== "default" && e[`color${m(r.color)}`], r.edge && e[`edge${m(r.edge)}`], e[`size${m(r.size)}`]];
+    return [e.root, a.loading && e.loading, a.color !== "default" && e[`color${f(a.color)}`], a.edge && e[`edge${f(a.edge)}`], e[`size${f(a.size)}`]];
   }
 })(M(({
   theme: o
@@ -148,7 +150,7 @@ const W = oo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary
   [`&.${W.loading}`]: {
     color: "transparent"
   }
-}))), go = _("span", {
+}))), vo = j("span", {
   name: "MuiIconButton",
   slot: "LoadingIndicator"
 })(({
@@ -169,60 +171,60 @@ const W = oo("MuiIconButton", ["root", "disabled", "colorInherit", "colorPrimary
       display: "flex"
     }
   }]
-})), j = /* @__PURE__ */ w.forwardRef(function(e, r) {
-  const c = to({
+})), F = /* @__PURE__ */ O.forwardRef(function(e, a) {
+  const l = po({
     props: e,
     name: "MuiIconButton"
   }), {
-    edge: g = !1,
-    children: f,
-    className: b,
-    color: u = "default",
+    edge: u = !1,
+    children: b,
+    className: c,
+    color: m = "default",
     disabled: y = !1,
-    disableFocusRipple: I = !1,
+    disableFocusRipple: v = !1,
     size: z = "medium",
-    id: v,
-    loading: s = null,
-    loadingIndicator: R,
-    ...l
-  } = c, N = no(v), B = R ?? /* @__PURE__ */ a(lo, {
+    id: I,
+    loading: d = null,
+    loadingIndicator: L,
+    ...s
+  } = l, N = mo(I), B = L ?? /* @__PURE__ */ r(bo, {
     "aria-labelledby": N,
     color: "inherit",
     size: 16
   }), h = {
-    ...c,
-    edge: g,
-    color: u,
+    ...l,
+    edge: u,
+    color: m,
     disabled: y,
-    disableFocusRipple: I,
-    loading: s,
+    disableFocusRipple: v,
+    loading: d,
     loadingIndicator: B,
     size: z
-  }, d = co(h);
-  return /* @__PURE__ */ L(po, {
-    id: s ? N : v,
-    className: eo(d.root, b),
+  }, p = Co(h);
+  return /* @__PURE__ */ S(yo, {
+    id: d ? N : I,
+    className: co(p.root, c),
     centerRipple: !0,
-    focusRipple: !I,
-    disabled: y || s,
-    ref: r,
-    ...l,
+    focusRipple: !v,
+    disabled: y || d,
+    ref: a,
+    ...s,
     ownerState: h,
-    children: [typeof s == "boolean" && // use plain HTML span to minimize the runtime overhead
-    /* @__PURE__ */ a("span", {
-      className: d.loadingWrapper,
+    children: [typeof d == "boolean" && // use plain HTML span to minimize the runtime overhead
+    /* @__PURE__ */ r("span", {
+      className: p.loadingWrapper,
       style: {
         display: "contents"
       },
-      children: /* @__PURE__ */ a(go, {
-        className: d.loadingIndicator,
+      children: /* @__PURE__ */ r(vo, {
+        className: p.loadingIndicator,
         ownerState: h,
-        children: s && B
+        children: d && B
       })
-    }), f]
+    }), b]
   });
 });
-process.env.NODE_ENV !== "production" && (j.propTypes = {
+process.env.NODE_ENV !== "production" && (F.propTypes = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
   // │ These PropTypes are generated from the TypeScript type definitions. │
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
@@ -230,7 +232,7 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
   /**
    * The icon to display.
    */
-  children: ro(t.node, (o) => w.Children.toArray(o.children).some((r) => /* @__PURE__ */ w.isValidElement(r) && r.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
+  children: uo(t.node, (o) => O.Children.toArray(o.children).some((a) => /* @__PURE__ */ O.isValidElement(a) && a.props.onClick) ? new Error(["MUI: You are providing an onClick event listener to a child of a button element.", "Prefer applying it to the IconButton directly.", "This guarantees that the whole <button> will be responsive to click events."].join(`
 `)) : null),
   /**
    * Override or extend the styles applied to the component.
@@ -301,149 +303,158 @@ process.env.NODE_ENV !== "production" && (j.propTypes = {
    */
   sx: t.oneOfType([t.arrayOf(t.oneOfType([t.func, t.object, t.bool])), t.func, t.object])
 });
-const uo = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%200%2046%2046'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M17.3434%2015.4595C16.8227%2014.9388%2015.9785%2014.9388%2015.4578%2015.4595C14.9371%2015.9802%2014.9371%2016.8244%2015.4578%2017.3451L21.1146%2023.002L15.4578%2028.6588C14.9371%2029.1795%2014.9371%2030.0237%2015.4578%2030.5444C15.9785%2031.0651%2016.8227%2031.0651%2017.3434%2030.5444L23.0002%2024.8876L28.6571%2030.5444C29.1778%2031.0651%2030.022%2031.0651%2030.5427%2030.5444C31.0634%2030.0237%2031.0634%2029.1795%2030.5427%2028.6588L24.8858%2023.002L30.5427%2017.3451C31.0634%2016.8244%2031.0634%2015.9802%2030.5427%2015.4595C30.022%2014.9388%2029.1778%2014.9388%2028.6571%2015.4595L23.0002%2021.1163L17.3434%2015.4595Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", wo = (o) => {
+const Io = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M2.27623%200.391122C1.75553%20-0.129577%200.911316%20-0.129578%200.390616%200.391122C-0.130083%200.911821%20-0.130083%201.75604%200.390616%202.27674L6.04747%207.93359L0.390616%2013.5904C-0.130083%2014.1111%20-0.130083%2014.9554%200.390616%2015.4761C0.911316%2015.9968%201.75553%2015.9968%202.27623%2015.4761L7.93309%209.81921L13.5899%2015.4761C14.1106%2015.9968%2014.9549%2015.9968%2015.4756%2015.4761C15.9963%2014.9554%2015.9963%2014.1111%2015.4756%2013.5904L9.81871%207.93359L15.4756%202.27674C15.9963%201.75604%2015.9963%200.911822%2015.4756%200.391122C14.9549%20-0.129577%2014.1106%20-0.129578%2013.5899%200.391123L7.93309%206.04798L2.27623%200.391122Z'%20fill='%233AA8FF'/%3e%3c/svg%3e", _o = (o) => {
   const {
     onCloseDialogHandler: e,
-    photoSources: r = [],
-    photoCrops: c = [],
-    onCropChange: g = () => {
+    photoSources: a = [],
+    photoCrops: l = [],
+    onCropChange: u = () => {
     },
-    onPhotoLoad: f,
-    imageRef: b,
-    photoError: u,
+    onPhotoLoad: b,
+    imageRef: c,
+    photoError: m,
     onPhotoCrop: y,
-    onNextPhoto: I,
+    onNextPhoto: v,
     onSkipCrop: z,
-    onClearErrors: v,
-    minDimension: s = q,
-    aspectRatio: R = G,
-    locale: l = K,
+    onClearErrors: I,
+    minDimension: d = ao,
+    aspectRatio: L = ro,
+    locale: s = eo,
     circular: N,
     keepSelection: B = !0,
     photoSourceLoading: h,
-    className: d,
+    className: p,
     photoIndex: C,
-    loadingValue: F,
-    errors: T,
-    theme: x = Y,
-    ...E
-  } = o, S = r.slice(C).length > 1;
-  return h || !r.length && !T?.length ? /* @__PURE__ */ a(
-    O,
+    loadingValue: $,
+    errors: R,
+    theme: T = to,
+    ...x
+  } = o, E = a.slice(C).length > 1, [V, _] = q(null), H = G(
+    (w) => {
+      c && (c.current = w), _(w);
+    },
+    [c]
+  ), { minWidth: K, minHeight: Y } = J(V, d);
+  return h || !a.length && !R?.length ? /* @__PURE__ */ r(
+    k,
     {
-      className: i(n.dialog, d, n[x]),
+      className: i(n.dialog, p, n[T]),
       onClose: e,
-      ...E,
-      children: /* @__PURE__ */ a(A, { className: i(n.content), children: /* @__PURE__ */ a(Q, { value: F }) })
+      ...x,
+      children: /* @__PURE__ */ r(A, { className: i(n.content), children: /* @__PURE__ */ r(io, { value: $ }) })
     }
-  ) : T?.length ? /* @__PURE__ */ a(
-    O,
+  ) : R?.length ? /* @__PURE__ */ r(
+    k,
     {
-      className: i(n.dialog, d, n[x]),
+      className: i(n.dialog, p, n[T]),
       onClose: e,
-      ...E,
-      children: /* @__PURE__ */ a(
-        H,
+      ...x,
+      children: /* @__PURE__ */ r(
+        X,
         {
-          locale: l,
-          photoSources: r,
-          errors: T,
+          locale: s,
+          photoSources: a,
+          errors: R,
           onCloseDialogHandler: e,
-          onClearErrors: v
+          onClearErrors: I
         }
       )
     }
-  ) : /* @__PURE__ */ L(
-    O,
+  ) : /* @__PURE__ */ S(
+    k,
     {
-      className: i(n.dialog, d, n[x]),
+      className: i(n.dialog, p, n[T]),
       onClose: e,
-      ...E,
+      ...x,
       children: [
-        /* @__PURE__ */ a(P, { className: i(n.topActions), children: /* @__PURE__ */ a(
-          j,
+        /* @__PURE__ */ r(D, { className: i(n.topActions), children: /* @__PURE__ */ r(
+          F,
           {
             onClick: e,
             className: i(n.close),
-            "aria-label": p[l].back,
-            children: /* @__PURE__ */ a(
+            "aria-label": g[s].back,
+            children: /* @__PURE__ */ r(
               "img",
               {
                 draggable: !1,
-                width: D,
-                height: D,
-                src: uo,
-                alt: p[l].back
+                src: Io,
+                alt: g[s].back
               }
             )
           }
         ) }),
-        /* @__PURE__ */ a(J, { className: i(n.title), children: p[l]["photo-crop"] }),
-        /* @__PURE__ */ L(A, { className: i(n.content, S && n.many), children: [
-          S && /* @__PURE__ */ a("span", {}),
-          !!r.length && /* @__PURE__ */ a(
-            V,
+        /* @__PURE__ */ r(no, { className: i(n.title), children: g[s]["photo-crop"] }),
+        /* @__PURE__ */ S(A, { className: i(n.content, E && n.many), children: [
+          !!a.length && /* @__PURE__ */ r(
+            Q,
             {
               className: i(n.crop),
-              crop: c[C],
+              crop: l[C],
               circularCrop: N,
               keepSelection: B,
-              aspect: R,
-              minWidth: s,
-              minHeight: s,
-              onChange: g,
-              children: /* @__PURE__ */ a(
+              aspect: L,
+              minWidth: K,
+              minHeight: Y,
+              onChange: u,
+              children: /* @__PURE__ */ r(
                 "img",
                 {
-                  onLoad: f,
-                  src: r[C],
-                  ref: b,
-                  alt: p[l]["photo-crop"],
+                  onLoad: b,
+                  src: a[C],
+                  ref: H,
+                  alt: g[s]["photo-crop"],
                   draggable: !1
                 },
                 C
               )
             }
           ),
-          S && /* @__PURE__ */ a(Z, { photoSources: r, photoIndex: C })
+          E && /* @__PURE__ */ r(
+            oo,
+            {
+              locale: s,
+              photoSources: a,
+              photoIndex: C
+            }
+          )
         ] }),
-        u && /* @__PURE__ */ a(P, { className: i(n.dialogText), children: u }),
-        /* @__PURE__ */ a(P, { className: i(n.botActions), children: S ? /* @__PURE__ */ L($, { children: [
-          /* @__PURE__ */ a(
-            k,
+        m && /* @__PURE__ */ r(D, { className: i(n.dialogText), children: m }),
+        /* @__PURE__ */ r(D, { className: i(n.botActions), children: E ? /* @__PURE__ */ S(Z, { children: [
+          /* @__PURE__ */ r(
+            P,
             {
               buttonSize: "small",
-              buttonColor: "blue",
+              buttonColor: "red",
               buttonVariant: "outlined",
               buttonWeight: 500,
               className: i(n.button),
               onClick: z,
-              children: p[l].skip
+              children: g[s].skip
             }
           ),
-          /* @__PURE__ */ a(
-            k,
+          /* @__PURE__ */ r(
+            P,
             {
               buttonSize: "small",
               buttonColor: "blue",
-              buttonVariant: "filled",
+              buttonVariant: "outlined",
               buttonWeight: 500,
               className: i(n.button),
-              onClick: I,
-              children: p[l].continue
+              onClick: v,
+              children: g[s].continue
             }
           )
-        ] }) : /* @__PURE__ */ a(
-          k,
+        ] }) : /* @__PURE__ */ r(
+          P,
           {
             minWidth: "100%",
             buttonSize: "small",
             buttonColor: "blue",
-            buttonVariant: "filled",
+            buttonVariant: "outlined",
             buttonWeight: 500,
             className: i(n.button),
             onClick: y,
-            children: p[l].crop
+            children: g[s].crop
           }
         ) })
       ]
@@ -451,5 +462,5 @@ const uo = "data:image/svg+xml,%3csvg%20width='46'%20height='46'%20viewBox='0%20
   );
 };
 export {
-  wo as UploadDialog
+  _o as UploadDialog
 };

package/dist/components/photo-crop-uploader/components/upload-dialog/use-scaled-min-dimension.d.ts

@@ -0,0 +1,4 @@
+export declare function useScaledMinDimension(el: HTMLImageElement | null, minDimension: number): {
+    minWidth: number;
+    minHeight: number;
+};

package/dist/components/photo-crop-uploader/components/upload-dialog/use-scaled-min-dimension.js

@@ -0,0 +1,31 @@
+import { useState as o, useEffect as s } from "react";
+import { debounce as i } from "../../../../utils/debounce.js";
+const f = 100;
+function u(e, t) {
+  const { naturalWidth: d, naturalHeight: c, width: r, height: a } = e;
+  return !d || !c || !r || !a ? { minWidth: t, minHeight: t } : {
+    minWidth: Math.min(t * (r / d), r),
+    minHeight: Math.min(t * (a / c), a)
+  };
+}
+function v(e, t) {
+  const [d, c] = o({
+    minWidth: t,
+    minHeight: t
+  });
+  return s(() => {
+    if (!e) {
+      c({ minWidth: t, minHeight: t });
+      return;
+    }
+    const r = () => c(u(e, t)), a = i(([n]) => {
+      c(u(n.target, t));
+    }, f), h = new ResizeObserver(a);
+    return h.observe(e), e.addEventListener("load", r), r(), () => {
+      a.cancel(), h.disconnect(), e.removeEventListener("load", r);
+    };
+  }, [e, t]), d;
+}
+export {
+  v as useScaledMinDimension
+};

package/dist/components/photo-crop-uploader/locale.js

@@ -25,7 +25,9 @@ const e = {
     aspect: "The aspect ratio of the cropped image must not be greater than 2",
     close: "Close",
     "not-uploaded": "Files were not uploaded",
-    "some-not-uploaded": "Some files were not uploaded"
+    "some-not-uploaded": "Some files were not uploaded",
+    "photo-in-queue": "Photo in queue",
+    more: "more"
   },
   ru: {
     upload: "Загрузить файл",
@@ -53,7 +55,9 @@ const e = {
     aspect: "Соотношение сторон обрезаемого изображения не должно быть больше 2",
     close: "Закрыть",
     "not-uploaded": "Файлы не были загружены",
-    "some-not-uploaded": "Некоторые файлы не были загружены"
+    "some-not-uploaded": "Некоторые файлы не были загружены",
+    "photo-in-queue": "Фотография в очереди",
+    more: "Еще"
   }
 };
 export {