mimir-ui-kit 1.34.4-t → 1.34.4

package/dist/components/DatePicker/YearPickerModal.js

@@ -1,89 +1,120 @@
-import { jsx as r, Fragment as z, jsxs as k } from "react/jsx-runtime";
-import { useRef as E, useState as F, useEffect as M } from "react";
-import { c as n } from "../../styles.module-CaPkyXYQ.js";
-import { formating as c } from "../../utils/index.js";
-import { Button as v } from "../Button/Button.js";
-function G({
-  date: u,
-  onChangeValue: $,
-  before: d,
-  onType: s
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import { c as cls } from "../../styles.module-B9L4B63y.js";
+import { formating } from "../../utils/index.js";
+import { Button } from "../Button/Button.js";
+function YearPickerModal({
+  date,
+  onChangeValue,
+  before,
+  onType
 }) {
-  const e = E(null), a = new Date(u), l = new Date(u), f = {
-    y: a.getFullYear(),
-    d: a.getDate(),
-    m: a.getMonth() + 1
-  }, o = {
-    y: l.getFullYear(),
-    d: l.getDate(),
-    m: l.getMonth() + 1
-  }, [m, g] = F(o.y), p = 368, B = m - 7, C = Array.from(Array(15).keys()).map((t) => t + B);
-  M(() => {
-    var w, y, N, x;
-    const t = window.innerHeight, i = window.innerWidth;
-    if (e.current !== null) {
-      const A = ((y = (w = e == null ? void 0 : e.current) == null ? void 0 : w.parentElement) == null ? void 0 : y.offsetWidth) || 0, j = (x = (N = e == null ? void 0 : e.current) == null ? void 0 : N.parentElement) == null ? void 0 : x.offsetHeight, D = e.current.getBoundingClientRect(), b = e.current.offsetHeight;
-      t < D.y + b ? e.current.style.top = -b + "px" : e.current.style.top = j + "px", i < D.x + p && (e.current.style.left = A - p + "px"), e.current.style.opacity = "1";
+  const field = useRef(null);
+  const _current = new Date(date);
+  const _selecte = new Date(date);
+  const current = {
+    y: _current.getFullYear(),
+    d: _current.getDate(),
+    m: _current.getMonth() + 1
+  };
+  const selecte = {
+    y: _selecte.getFullYear(),
+    d: _selecte.getDate(),
+    m: _selecte.getMonth() + 1
+  };
+  const [year, setYear] = useState(selecte.y);
+  const blockWidth = 368;
+  const firstYears = year - 7;
+  const years = Array.from(Array(15).keys()).map((i) => i + firstYears);
+  useEffect(() => {
+    var _a, _b, _c, _d;
+    const windowHeight = window.innerHeight;
+    const windowWidth = window.innerWidth;
+    if (field.current !== null) {
+      const inputWidth = ((_b = (_a = field == null ? void 0 : field.current) == null ? void 0 : _a.parentElement) == null ? void 0 : _b.offsetWidth) || 0;
+      const inputHeight = (_d = (_c = field == null ? void 0 : field.current) == null ? void 0 : _c.parentElement) == null ? void 0 : _d.offsetHeight;
+      const inputPosition = field.current.getBoundingClientRect();
+      const calendarSize = field.current.offsetHeight;
+      if (windowHeight < inputPosition.y + calendarSize) {
+        field.current.style.top = -calendarSize + "px";
+      } else {
+        field.current.style.top = inputHeight + "px";
+      }
+      if (windowWidth < inputPosition.x + blockWidth) {
+        field.current.style.left = inputWidth - blockWidth + "px";
+      }
+      field.current.style.opacity = "1";
     }
   }, []);
-  const H = () => {
-    g(m + 15);
-  }, W = () => {
-    g(m - 15);
-  }, h = (t) => !!(d && d.getTime() > t), Y = (t) => {
-    h(
+  const next = () => {
+    setYear(year + 15);
+  };
+  const prev = () => {
+    setYear(year - 15);
+  };
+  const isBefore = (activeDate) => {
+    if (before) {
+      const beforeDate = before.getTime();
+      if (beforeDate > activeDate) return true;
+    }
+    return false;
+  };
+  const send = (searchDate) => {
+    if (isBefore(
       (/* @__PURE__ */ new Date(
-        `${t}-${c.Number(2, o.m)}-${c.Number(2, o.d)}`
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
       )).getTime()
-    ) || $(
+    ))
+      return;
+    onChangeValue(
       /* @__PURE__ */ new Date(
-        `${t}-${c.Number(2, o.m)}-${c.Number(2, o.d)}`
+        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
       )
     );
   };
-  return /* @__PURE__ */ r(z, { children: /* @__PURE__ */ k("div", { className: [n["calendar-block"]].join(" "), ref: e, children: [
-    /* @__PURE__ */ k("div", { className: n.h, children: [
-      /* @__PURE__ */ r(
-        v,
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { className: [cls["calendar-block"]].join(" "), ref: field, children: [
+    /* @__PURE__ */ jsxs("div", { className: cls["h"], children: [
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          isIconButton: !0,
+          isIconButton: true,
           iconName: "DropdownArrowLeft16px",
-          onClick: W,
+          onClick: prev,
           variant: "secondary-gray",
           size: "l"
         }
       ),
-      /* @__PURE__ */ r("div", { onClick: () => s == null ? void 0 : s("years"), className: n.d }),
-      /* @__PURE__ */ r(
-        v,
+      /* @__PURE__ */ jsx("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"] }),
+      /* @__PURE__ */ jsx(
+        Button,
         {
-          isIconButton: !0,
+          isIconButton: true,
           iconName: "DropdownArrowRight16px",
-          onClick: H,
+          onClick: next,
           variant: "secondary-gray",
           size: "l"
         }
       )
     ] }),
-    /* @__PURE__ */ r("div", { className: n.monthGrid, "data-testid": "year-picker", children: C.map((t, i) => /* @__PURE__ */ r(
+    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], "data-testid": "year-picker", children: years.map((i, s) => /* @__PURE__ */ jsx(
       "div",
       {
-        className: h(
-          (/* @__PURE__ */ new Date(`${t}-${c.Number(2, f.m)}`)).getTime()
-        ) ? n.m : n.a,
-        children: /* @__PURE__ */ r(
+        className: isBefore(
+          (/* @__PURE__ */ new Date(`${i}-${formating.Number(2, current.m)}`)).getTime()
+        ) ? cls["m"] : cls["a"],
+        children: /* @__PURE__ */ jsx(
           "b",
           {
-            className: f.y === t ? n.current : "",
-            onClick: () => Y(t),
-            children: t
+            className: current.y === i ? cls["current"] : "",
+            onClick: () => send(i),
+            children: i
           }
         )
       },
-      i
+      s
     )) })
   ] }) });
 }
 export {
-  G as YearPickerModal
+  YearPickerModal
 };

package/dist/components/DatePicker/constants.js

@@ -1,5 +1,11 @@
-var t = /* @__PURE__ */ ((r) => (r.CurrentDate1 = "2024-08-01", r.CurrentDate2 = "2024-07-01", r.CurrentDate3 = "2024-07-11", r))(t || {});
-const u = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"], C = [
+var EDatePickerBeforeDate = /* @__PURE__ */ ((EDatePickerBeforeDate2) => {
+  EDatePickerBeforeDate2["CurrentDate1"] = "2024-08-01";
+  EDatePickerBeforeDate2["CurrentDate2"] = "2024-07-01";
+  EDatePickerBeforeDate2["CurrentDate3"] = "2024-07-11";
+  return EDatePickerBeforeDate2;
+})(EDatePickerBeforeDate || {});
+const week = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"];
+const months = [
   "Январь",
   "Февраль",
   "Март",
@@ -13,10 +19,15 @@ const u = ["пн", "вт", "ср", "чт", "пт", "сб", "вс"], C = [
   "Ноябрь",
   "Декабрь"
 ];
-var n = /* @__PURE__ */ ((r) => (r.CurrentDate1 = "", r.CurrentDate = "20240510", r.CurrentDate3 = "2024-09-10", r))(n || {});
+var EDatePickerValue = /* @__PURE__ */ ((EDatePickerValue2) => {
+  EDatePickerValue2["CurrentDate1"] = "";
+  EDatePickerValue2["CurrentDate"] = "20240510";
+  EDatePickerValue2["CurrentDate3"] = "2024-09-10";
+  return EDatePickerValue2;
+})(EDatePickerValue || {});
 export {
-  t as EDatePickerBeforeDate,
-  n as EDatePickerValue,
-  C as months,
-  u as week
+  EDatePickerBeforeDate,
+  EDatePickerValue,
+  months,
+  week
 };

package/dist/components/DatePicker/index.js

@@ -1,4 +1,4 @@
-import { DatePicker as o } from "./DatePicker.js";
+import { DatePicker } from "./DatePicker.js";
 export {
-  o as DatePicker
+  DatePicker
 };

package/dist/components/DatePicker/utils.js

@@ -1,8 +1,16 @@
-const o = (r, t) => parseInt(r) > t ? t.toString() : r, c = (r) => {
-  const t = (/* @__PURE__ */ new Date()).getFullYear(), e = Math.floor(t / 100) * 100, n = parseInt(r) + e;
-  return n > t + 20 ? n - 100 : n;
+const YEAR_OFFSET = 20;
+const CENTURY = 100;
+const formatDatePart = (value, max) => {
+  const num = parseInt(value);
+  return num > max ? max.toString() : value;
+};
+const getFullYear = (year) => {
+  const currentYear = (/* @__PURE__ */ new Date()).getFullYear();
+  const currentCentury = Math.floor(currentYear / CENTURY) * CENTURY;
+  const fullYear = parseInt(year) + currentCentury;
+  return fullYear > currentYear + YEAR_OFFSET ? fullYear - CENTURY : fullYear;
 };
 export {
-  o as formatDatePart,
-  c as getFullYear
+  formatDatePart,
+  getFullYear
 };

package/dist/components/Drawer/Drawer.js

@@ -1,123 +1,165 @@
-import { jsxs as m, jsx as t, Fragment as A } from "react/jsx-runtime";
-import { c as s } from "../../index-DIxK0V-G.js";
-import { useState as u, useRef as X, useCallback as g, useEffect as j } from "react";
-import { EDrawerPosition as N } from "./constants.js";
-import { useMediaQuery as P } from "../../hooks/useMediaQuery/useMediaQuery.js";
-import { EMediaQuery as Q } from "../../hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll as F } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
-import { useResizeObserver as G } from "../../hooks/useResizeObserver/useResizeObserver.js";
-import { Button as k } from "../Button/Button.js";
-import { EButtonVariantDefault as H, EButtonSize as r } from "../Button/constants.js";
-import { Loader as K } from "../Loader/Loader.js";
-import { Portal as O } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4d_27", Y = "_header_1xs4d_45", q = "_title_1xs4d_59", J = "_space_1xs4d_73", U = "_inner_1xs4d_84", Z = "_button_1xs4d_87", $ = "_footer_1xs4d_92", ee = "_left_1xs4d_105", te = "_right_1xs4d_109", oe = "_full_1xs4d_113", se = "_bottom_1xs4d_123", ne = "_opened_1xs4d_140", re = "_overlay_1xs4d_196", le = "_unmount_1xs4d_212", e = {
-  drawer: V,
-  content: W,
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { EDrawerPosition } from "./constants.js";
+import { useMediaQuery } from "../../hooks/useMediaQuery/useMediaQuery.js";
+import { EMediaQuery } from "../../hooks/useMediaQuery/constants.js";
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll/useLockBodyScroll.js";
+import { useResizeObserver } from "../../hooks/useResizeObserver/useResizeObserver.js";
+import { Button } from "../Button/Button.js";
+import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
+import { Loader } from "../Loader/Loader.js";
+import { Portal } from "../Portal/Portal.js";
+import '../../assets/Drawer.css';const drawer = "_drawer_1xs4d_3";
+const content = "_content_1xs4d_27";
+const header = "_header_1xs4d_45";
+const title = "_title_1xs4d_59";
+const space = "_space_1xs4d_73";
+const inner = "_inner_1xs4d_84";
+const button = "_button_1xs4d_87";
+const footer = "_footer_1xs4d_92";
+const left = "_left_1xs4d_105";
+const right = "_right_1xs4d_109";
+const full = "_full_1xs4d_113";
+const bottom = "_bottom_1xs4d_123";
+const opened = "_opened_1xs4d_140";
+const overlay = "_overlay_1xs4d_196";
+const unmount = "_unmount_1xs4d_212";
+const cls = {
+  drawer,
+  content,
   "is-loading": "_is-loading_1xs4d_41",
-  header: Y,
+  header,
   "sticky-header": "_sticky-header_1xs4d_53",
-  title: q,
-  space: J,
-  inner: U,
-  button: Z,
-  footer: $,
+  title,
+  space,
+  inner,
+  button,
+  footer,
   "footer-button": "_footer-button_1xs4d_101",
-  left: ee,
-  right: te,
-  full: oe,
-  bottom: se,
+  left,
+  right,
+  full,
+  bottom,
   "full-bottom-height": "_full-bottom-height_1xs4d_134",
-  opened: ne,
+  opened,
   "is-closing": "_is-closing_1xs4d_159",
-  overlay: re,
-  unmount: le
-}, ie = 300, ge = ({
-  isOpen: n,
-  onClose: l,
-  title: v,
-  className: w,
-  unmount: f = !0,
-  isLoading: i = !1,
-  stickyHeader: B,
-  fullBottomHeight: E = !1,
-  position: c = N.RIGHT,
-  paddingRight: M = 8,
-  footer: a,
-  children: S,
-  classNameInner: I,
-  classNameFooter: C
+  overlay,
+  unmount
+};
+const ANIMATION_DELAY = 300;
+const Drawer = ({
+  isOpen,
+  onClose,
+  title: title2,
+  className,
+  unmount: unmount2 = true,
+  isLoading = false,
+  stickyHeader,
+  fullBottomHeight = false,
+  position = EDrawerPosition.RIGHT,
+  paddingRight = 8,
+  footer: footer2,
+  children,
+  classNameInner,
+  classNameFooter
 }) => {
-  const [L, h] = u(!1), [T, x] = u(!1), [D, p] = u(!1), y = X(), d = P(Q.XS1), { ref: z } = G({
-    enabled: c === N.BOTTOM
+  const [isClosing, setIsClosing] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
+  const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
+  const timerRef = useRef();
+  const isMobile = useMediaQuery(EMediaQuery.XS1);
+  const { ref } = useResizeObserver({
+    enabled: position === EDrawerPosition.BOTTOM
   });
-  F({
-    on: D,
-    paddingRight: M
+  useLockBodyScroll({
+    on: isBodyScrollLocked,
+    paddingRight
   });
-  const o = g(() => {
-    l && (h(!0), p(!1), y.current = setTimeout(() => {
-      l(), h(!1);
-    }, ie));
-  }, [l]), _ = g(
-    (R) => {
-      R.key === "Escape" && o();
+  const handleClose = useCallback(() => {
+    if (onClose) {
+      setIsClosing(true);
+      setIsBodyScrollLocked(false);
+      timerRef.current = setTimeout(() => {
+        onClose();
+        setIsClosing(false);
+      }, ANIMATION_DELAY);
+    }
+  }, [onClose]);
+  const handleKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape") {
+        handleClose();
+      }
     },
-    [o]
+    [handleClose]
   );
-  j(() => (n && (p(!0), x(!0), window.addEventListener("keydown", _)), () => {
-    x(!1), clearTimeout(y.current), window.removeEventListener("keydown", _);
-  }), [n, _]);
-  const b = {
-    [e.opened]: T,
-    [e["is-closing"]]: L,
-    [e["full-bottom-height"]]: E,
-    [e["is-loading"]]: i
+  useEffect(() => {
+    if (isOpen) {
+      setIsBodyScrollLocked(true);
+      setIsMounted(true);
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => {
+      setIsMounted(false);
+      clearTimeout(timerRef.current);
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen, handleKeyDown]);
+  const mods = {
+    [cls.opened]: isMounted,
+    [cls["is-closing"]]: isClosing,
+    [cls["full-bottom-height"]]: fullBottomHeight,
+    [cls["is-loading"]]: isLoading
   };
-  return !n && f ? null : /* @__PURE__ */ m(O, { children: [
-    /* @__PURE__ */ t(
+  if (!isOpen && unmount2) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(Portal, { children: [
+    /* @__PURE__ */ jsx(
       "div",
       {
-        "aria-hidden": !n,
+        "aria-hidden": !isOpen,
         role: "dialog",
-        className: s(e.drawer, e[c], b, w),
-        children: /* @__PURE__ */ t(
+        className: classNames(cls.drawer, cls[position], mods, className),
+        children: /* @__PURE__ */ jsx(
           "section",
           {
-            ref: z,
-            className: s(e.content, e[c], {
-              [e["is-loading"]]: !!i
+            ref,
+            className: classNames(cls.content, cls[position], {
+              [cls["is-loading"]]: Boolean(isLoading)
             }),
-            children: i ? /* @__PURE__ */ t(K, {}) : /* @__PURE__ */ m(A, { children: [
-              /* @__PURE__ */ m(
+            children: isLoading ? /* @__PURE__ */ jsx(Loader, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs(
                 "header",
                 {
-                  className: s(e.header, {
-                    [e["sticky-header"]]: B
+                  className: classNames(cls.header, {
+                    [cls["sticky-header"]]: stickyHeader
                   }),
                   children: [
-                    /* @__PURE__ */ t("h2", { className: e.title, children: v }),
-                    /* @__PURE__ */ t("div", { className: e.space, children: /* @__PURE__ */ t(
-                      k,
+                    /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
+                    /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
+                      Button,
                       {
-                        variant: H.SecondaryWhite,
-                        isIconButton: !0,
-                        size: d ? r.S : r.M,
+                        variant: EButtonVariantDefault.SecondaryWhite,
+                        isIconButton: true,
+                        size: isMobile ? EButtonSize.S : EButtonSize.M,
                         iconName: "Close16px",
-                        onClick: o,
-                        className: e.button
+                        onClick: handleClose,
+                        className: cls.button
                       }
                     ) })
                   ]
                 }
               ),
-              /* @__PURE__ */ t("div", { className: s(e.inner, I), children: S }),
-              /* @__PURE__ */ t("footer", { className: s(e.footer, C), children: typeof a == "function" ? a({ handleClose: o }) : a || /* @__PURE__ */ t(
-                k,
+              /* @__PURE__ */ jsx("div", { className: classNames(cls.inner, classNameInner), children }),
+              /* @__PURE__ */ jsx("footer", { className: classNames(cls.footer, classNameFooter), children: typeof footer2 === "function" ? footer2({ handleClose }) : footer2 || /* @__PURE__ */ jsx(
+                Button,
                 {
-                  size: d ? r.M : r.XXL,
-                  full: d,
-                  onClick: o,
-                  className: e["footer-button"],
+                  size: isMobile ? EButtonSize.M : EButtonSize.XXL,
+                  full: isMobile,
+                  onClick: handleClose,
+                  className: cls["footer-button"],
                   children: "Закрыть"
                 }
               ) })
@@ -126,21 +168,21 @@ import '../../assets/Drawer.css';const V = "_drawer_1xs4d_3", W = "_content_1xs4
         )
       }
     ),
-    /* @__PURE__ */ t(
+    /* @__PURE__ */ jsx(
       "div",
       {
-        className: s(
-          e.overlay,
+        className: classNames(
+          cls.overlay,
           {
-            [e.unmount]: !f
+            [cls.unmount]: !unmount2
           },
-          b
+          mods
         ),
-        onClick: o
+        onClick: handleClose
       }
     )
   ] });
 };
 export {
-  ge as Drawer
+  Drawer
 };

package/dist/components/Drawer/constants.js

@@ -1,4 +1,10 @@
-var l = /* @__PURE__ */ ((T) => (T.LEFT = "left", T.RIGHT = "right", T.BOTTOM = "bottom", T.FULL = "full", T))(l || {});
+var EDrawerPosition = /* @__PURE__ */ ((EDrawerPosition2) => {
+  EDrawerPosition2["LEFT"] = "left";
+  EDrawerPosition2["RIGHT"] = "right";
+  EDrawerPosition2["BOTTOM"] = "bottom";
+  EDrawerPosition2["FULL"] = "full";
+  return EDrawerPosition2;
+})(EDrawerPosition || {});
 export {
-  l as EDrawerPosition
+  EDrawerPosition
 };

package/dist/components/Drawer/index.js

@@ -1,6 +1,6 @@
-import { Drawer as e } from "./Drawer.js";
-import { EDrawerPosition as a } from "./constants.js";
+import { Drawer } from "./Drawer.js";
+import { EDrawerPosition } from "./constants.js";
 export {
-  e as Drawer,
-  a as EDrawerPosition
+  Drawer,
+  EDrawerPosition
 };