mimir-ui-kit 1.59.2 → 1.60.0

package/dist/assets/Pagination.css

@@ -1 +1 @@
-._pagination-button_1rzjl_2{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px;height:40px;color:var(--black-100);font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-inter);background-color:transparent;border-radius:var(--mimir-control-radius);-webkit-font-feature-settings:"zero";font-feature-settings:"zero"}._pagination-button_1rzjl_2:active{background-color:var(--pagination-active)}._pagination-button_1rzjl_2:focus-visible,._pagination-button_1rzjl_2:hover{color:var(--sapphire-normal);-webkit-text-decoration:none;text-decoration:none}._pagination-button_1rzjl_2._is-active_1rzjl_23{background-color:var(--pagination-active)}._pagination-button--date_1rzjl_26{width:auto;padding:var(--mimir-space-xs) var(--mimir-space-s)}._date-content_1rzjl_31{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-2xs);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:var(--mimir-font-weight-text-regular)}._date-text_1rzjl_38{font-size:var(--mimir-size-text-l);line-height:var(--mimir-line-height-text-s1)}._container_1rzjl_43{--pagination-active: #e5e5e5;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-2xl);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}._container_1rzjl_43:not(:last-child){margin-bottom:0 auto var(--mimir-space-xl)}._container--date-mode_1rzjl_53{gap:var(--mimir-space-l)}@media (max-width: 767.9px){._container_1rzjl_43,._container--date-mode_1rzjl_53{gap:var(--mimir-space-xs)}}._container_1rzjl_43 ._ellipsis_1rzjl_64{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}._disabled_1rzjl_69{pointer-events:none}._disabled_1rzjl_69 ._pagination-button_1rzjl_2{color:var(--disabled-color)}
+._pagination-button_1b4hk_2{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;width:40px;height:40px;color:var(--black-100);font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-inter);background-color:transparent;border-radius:var(--mimir-control-radius);-webkit-font-feature-settings:"zero";font-feature-settings:"zero"}._pagination-button_1b4hk_2:active{background-color:var(--pagination-active)}._pagination-button_1b4hk_2:focus-visible,._pagination-button_1b4hk_2:hover{color:var(--sapphire-normal);-webkit-text-decoration:none;text-decoration:none}._pagination-button_1b4hk_2._is-active_1b4hk_23{background-color:var(--pagination-active)}._container_1b4hk_27{--pagination-active: #e5e5e5;display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-2xl);-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0 auto}._container_1b4hk_27:not(:last-child){margin-bottom:0 auto var(--mimir-space-xl)}._container--date-mode_1b4hk_37{gap:var(--mimir-space-l)}@media (max-width: 767.9px){._container_1b4hk_27,._container--date-mode_1b4hk_37{gap:var(--mimir-space-xs)}}._container_1b4hk_27 ._ellipsis_1b4hk_48{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;pointer-events:none}._disabled_1b4hk_53{pointer-events:none}._disabled_1b4hk_53 ._pagination-button_1b4hk_2{color:var(--disabled-color)}

package/dist/assets/PaginationDateButton.css

@@ -0,0 +1 @@
+._pagination-button_1182x_2{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;height:40px;color:var(--black-100);font-weight:var(--mimir-font-weight-text-medium);font-size:var(--mimir-size-text-l);font-family:var(--mimir-font-inter);background-color:transparent;border-radius:var(--mimir-control-radius);-webkit-font-feature-settings:"zero";font-feature-settings:"zero"}._pagination-button_1182x_2:active{background-color:var(--pagination-active)}._pagination-button_1182x_2:focus-visible,._pagination-button_1182x_2:hover{color:var(--sapphire-normal);-webkit-text-decoration:none;text-decoration:none}._pagination-button_1182x_2._is-active_1182x_22{background-color:var(--pagination-active)}._pagination-button--date_1182x_25{width:auto;padding:var(--mimir-space-xs) var(--mimir-space-s)}._pagination-button_1182x_2 ._date-content_1182x_29{display:-webkit-box;display:-ms-flexbox;display:flex;gap:var(--mimir-space-2xs);-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-weight:var(--mimir-font-weight-text-regular)}._pagination-button_1182x_2 ._date-text_1182x_35{font-size:var(--mimir-size-text-l);line-height:var(--mimir-line-height-text-s1)}

package/dist/components/DatePicker/DatePickerModal.js

@@ -33,7 +33,7 @@ const ct = ({
     y: l.getFullYear(),
     d: l.getDate(),
     m: l.getMonth() + 1
-  }, [r, b] = V({ y: v.y, m: v.m }), C = K([r], j), L = (t) => {
+  }, [r, b] = V({ y: v.y, m: v.m }), C = K(j, [r]), L = (t) => {
     let e = t.getDay();
     return e === 0 && (e = 7), e - 1;
   }, x = r.m - 1, c = new Date(r.y, x), h = [], M = (() => {

package/dist/components/DatePicker/MonthPickerModal.d.ts

@@ -10,6 +10,7 @@ type TProps = {
     disabledDate?: (date: Date) => boolean;
     validRange?: [Date, Date];
     dateFormat?: 'full' | 'month' | 'year';
+    position?: 'center' | 'bottom' | 'top';
 };
-export declare const MonthPickerModal: ({ date, selectedDate, onChangeValue, before, onChangeType, onChangeMonth, disableFuture, disablePast, disabledDate, validRange, dateFormat }: TProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MonthPickerModal: ({ date, selectedDate, onChangeValue, before, onChangeType, onChangeMonth, disableFuture, disablePast, disabledDate, validRange, dateFormat, position }: TProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DatePicker/MonthPickerModal.js

@@ -1,13 +1,13 @@
 import { jsxs as w, jsx as f } from "react/jsx-runtime";
-import { c as _ } from "../../index-DIxK0V-G.js";
-import { useState as C } from "react";
-import { months as L } from "./constants.js";
-import { useDatePickerPosition as b } from "./hooks.js";
+import { c as C } from "../../index-DIxK0V-G.js";
+import { useState as L } from "react";
+import { months as b } from "./constants.js";
+import { useDatePickerPosition as q } from "./hooks.js";
 import { c } from "../../styles.module-DeBRSK_x.js";
-import { Icon as q } from "../../icons/Icon.js";
+import { Icon as E } from "../../icons/Icon.js";
 import { formating as P } from "../../utils/index.js";
 import { Button as A } from "../Button/Button.js";
-const T = ({
+const tt = ({
   date: F,
   selectedDate: D,
   onChangeValue: G,
@@ -18,9 +18,10 @@ const T = ({
   disablePast: N = !1,
   disabledDate: u,
   validRange: h,
-  dateFormat: M
+  dateFormat: M,
+  position: O
 }) => {
-  const O = b(), d = new Date(F), p = D ? new Date(D) : d, k = {
+  const S = q(O), d = new Date(F), p = D ? new Date(D) : d, k = {
     y: p.getFullYear(),
     d: p.getDate(),
     m: p.getMonth() + 1
@@ -28,9 +29,9 @@ const T = ({
     y: d.getFullYear(),
     d: d.getDate(),
     m: d.getMonth() + 1
-  }, [t, Y] = C(x.y), S = () => {
+  }, [t, Y] = L(x.y), $ = () => {
     Y(t + 1);
-  }, $ = () => {
+  }, j = () => {
     Y(t - 1);
   }, v = (e) => {
     const i = /* @__PURE__ */ new Date(), r = i.getFullYear(), l = i.getMonth() + 1;
@@ -39,8 +40,8 @@ const T = ({
       o.setHours(0, 0, 0, 0), s.setHours(23, 59, 59, 999);
       const B = new Date(n), H = new Date(a);
       B.setHours(0, 0, 0, 0), H.setHours(23, 59, 59, 999);
-      const z = s < B, R = o > H;
-      if (z || R)
+      const R = s < B, _ = o > H;
+      if (R || _)
         return !0;
     }
     if (m) {
@@ -69,21 +70,21 @@ const T = ({
       return !0;
     }
     return !1;
-  }, j = (e) => {
+  }, z = (e) => {
     v(e) || (g ? g(t, e) : G(
       /* @__PURE__ */ new Date(
         `${t}-${P.Number(2, e)}-${P.Number(2, x.d)}`
       )
     ));
   };
-  return /* @__PURE__ */ w("div", { className: c["calendar-block"], ref: O, children: [
+  return /* @__PURE__ */ w("div", { className: c["calendar-block"], ref: S, children: [
     /* @__PURE__ */ w("div", { className: c.h, children: [
       /* @__PURE__ */ f(
         A,
         {
           isIconButton: !0,
           iconName: "DropdownArrowLeft16px",
-          onClick: $,
+          onClick: j,
           variant: "secondary-gray",
           size: "l"
         }
@@ -97,7 +98,7 @@ const T = ({
           onClick: M === "month" ? void 0 : () => y == null ? void 0 : y("years"),
           children: [
             t.toString(),
-            M !== "month" && /* @__PURE__ */ f(q, { iconName: "DropdownArrowBottom16px" })
+            M !== "month" && /* @__PURE__ */ f(E, { iconName: "DropdownArrowBottom16px" })
           ]
         }
       ),
@@ -106,21 +107,21 @@ const T = ({
         {
           isIconButton: !0,
           iconName: "DropdownArrowRight16px",
-          onClick: S,
+          onClick: $,
           variant: "secondary-gray",
           size: "l"
         }
       )
     ] }),
-    /* @__PURE__ */ f("div", { className: c.monthGrid, "data-testid": "month-picker", children: L.map((e, i) => {
+    /* @__PURE__ */ f("div", { className: c.monthGrid, "data-testid": "month-picker", children: b.map((e, i) => {
       const r = i + 1, l = v(r);
       return /* @__PURE__ */ f(
         "button",
         {
           type: "button",
-          onClick: () => j(r),
+          onClick: () => z(r),
           disabled: l,
-          className: _(l ? c.m : c.a, {
+          className: C(l ? c.m : c.a, {
             [c.current]: D && k.y === t && k.m === r
           }),
           children: e
@@ -131,5 +132,5 @@ const T = ({
   ] });
 };
 export {
-  T as MonthPickerModal
+  tt as MonthPickerModal
 };

package/dist/components/DatePicker/YearPickerModal.d.ts

@@ -9,6 +9,7 @@ type TProps = {
     disablePast?: boolean;
     disabledDate?: (date: Date) => boolean;
     validRange?: [Date, Date];
+    position?: 'center' | 'bottom' | 'top';
 };
-export declare const YearPickerModal: ({ date, selectedDate, onChangeValue, before, onChangeType, onChangeYear, disableFuture, disablePast, disabledDate, validRange }: TProps) => import("react/jsx-runtime").JSX.Element;
+export declare const YearPickerModal: ({ date, selectedDate, onChangeValue, before, onChangeType, onChangeYear, disableFuture, disablePast, disabledDate, validRange, position }: TProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/DatePicker/YearPickerModal.js

@@ -1,11 +1,11 @@
 import { jsxs as b, jsx as c } from "react/jsx-runtime";
-import { c as $ } from "../../index-DIxK0V-G.js";
-import { useState as j } from "react";
-import { useDatePickerPosition as z } from "./hooks.js";
+import { c as j } from "../../index-DIxK0V-G.js";
+import { useState as z } from "react";
+import { useDatePickerPosition as I } from "./hooks.js";
 import { c as n } from "../../styles.module-DeBRSK_x.js";
 import { formating as F } from "../../utils/index.js";
 import { Button as P } from "../Button/Button.js";
-const p = 15, I = 7, W = ({
+const p = 15, C = 7, X = ({
   date: v,
   selectedDate: u,
   onChangeValue: E,
@@ -15,9 +15,10 @@ const p = 15, I = 7, W = ({
   disableFuture: S = !1,
   disablePast: _ = !1,
   disabledDate: o,
-  validRange: k
+  validRange: k,
+  position: y
 }) => {
-  const y = z(), i = new Date(v), l = u ? new Date(u) : i, G = {
+  const G = I(y), i = new Date(v), l = u ? new Date(u) : i, M = {
     y: l.getFullYear(),
     d: l.getDate(),
     m: l.getMonth() + 1
@@ -25,11 +26,11 @@ const p = 15, I = 7, W = ({
     y: i.getFullYear(),
     d: i.getDate(),
     m: i.getMonth() + 1
-  }, [D, h] = j(e.y), M = D - I, Q = Array.from(Array(p).keys()).map(
-    (t) => t + M
-  ), B = () => {
+  }, [D, h] = z(e.y), Q = D - C, B = Array.from(Array(p).keys()).map(
+    (t) => t + Q
+  ), H = () => {
     h(D + p);
-  }, H = () => {
+  }, R = () => {
     h(D - p);
   }, g = (t) => {
     const s = (/* @__PURE__ */ new Date()).getFullYear();
@@ -56,21 +57,21 @@ const p = 15, I = 7, W = ({
       return o(w) && o(r) && o(m) && o(f);
     }
     return !1;
-  }, R = (t) => {
+  }, $ = (t) => {
     g(t) || (N ? N(t) : E(
       /* @__PURE__ */ new Date(
         `${t}-${F.Number(2, e.m)}-${F.Number(2, e.d)}`
       )
     ));
   };
-  return /* @__PURE__ */ b("div", { className: n["calendar-block"], ref: y, children: [
+  return /* @__PURE__ */ b("div", { className: n["calendar-block"], ref: G, children: [
     /* @__PURE__ */ b("div", { className: n.h, children: [
       /* @__PURE__ */ c(
         P,
         {
           isIconButton: !0,
           iconName: "DropdownArrowLeft16px",
-          onClick: H,
+          onClick: R,
           variant: "secondary-gray",
           size: "l"
         }
@@ -88,22 +89,22 @@ const p = 15, I = 7, W = ({
         {
           isIconButton: !0,
           iconName: "DropdownArrowRight16px",
-          onClick: B,
+          onClick: H,
           variant: "secondary-gray",
           size: "l"
         }
       )
     ] }),
-    /* @__PURE__ */ c("div", { className: n.monthGrid, "data-testid": "year-picker", children: Q.map((t, x) => {
+    /* @__PURE__ */ c("div", { className: n.monthGrid, "data-testid": "year-picker", children: B.map((t, x) => {
       const s = g(t);
       return /* @__PURE__ */ c(
         "button",
         {
           type: "button",
-          onClick: () => R(t),
+          onClick: () => $(t),
           disabled: s,
-          className: $(s ? n.m : n.a, {
-            [n.current]: u && G.y === t
+          className: j(s ? n.m : n.a, {
+            [n.current]: u && M.y === t
           }),
           children: t
         },
@@ -113,5 +114,5 @@ const p = 15, I = 7, W = ({
   ] });
 };
 export {
-  W as YearPickerModal
+  X as YearPickerModal
 };

package/dist/components/DatePicker/hooks.d.ts

@@ -1,3 +1,3 @@
 import { DependencyList } from 'react';
 
-export declare const useDatePickerPosition: (deps?: DependencyList, position?: "center" | "bottom" | "top") => import('react').RefObject<HTMLDivElement>;
+export declare const useDatePickerPosition: (position?: "center" | "bottom" | "top", deps?: DependencyList) => import('react').RefObject<HTMLDivElement>;

package/dist/components/DatePicker/hooks.js

@@ -1,31 +1,34 @@
 import { useRef as d, useEffect as h } from "react";
-import { BLOCK_WIDTH as s, MAX_MOBILE_WIDTH as w } from "./constants.js";
-const H = (a, l) => {
-  const p = d(null);
+import { BLOCK_WIDTH as l, MAX_MOBILE_WIDTH as w } from "./constants.js";
+const H = (i, a) => {
+  const f = d(null);
   return h(() => {
     var c, r, y;
-    const x = window.innerHeight, f = window.innerWidth, t = p.current;
+    const x = window.innerHeight, p = window.innerWidth, t = f.current;
     if (t && t !== null) {
-      const u = ((c = t == null ? void 0 : t.parentElement) == null ? void 0 : c.offsetWidth) ?? 0, n = ((r = t == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetHeight) ?? 0, o = (y = t == null ? void 0 : t.parentElement) == null ? void 0 : y.getBoundingClientRect(), e = t.offsetHeight;
-      if (l === "center") {
-        t.style.position = "fixed", t.style.top = `calc(50vh - ${e / 2}px)`, t.style.left = `calc(50vw - ${s / 2}px)`, t.style.opacity = "1";
-        return;
+      const u = ((c = t == null ? void 0 : t.parentElement) == null ? void 0 : c.offsetWidth) ?? 0, s = ((r = t == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetHeight) ?? 0, o = (y = t == null ? void 0 : t.parentElement) == null ? void 0 : y.getBoundingClientRect(), e = t.offsetHeight;
+      if (i) {
+        if (i === "center") {
+          t.style.position = "fixed", t.style.top = `calc(50vh - ${e / 2}px)`, t.style.left = `calc(50vw - ${l / 2}px)`, t.style.opacity = "1";
+          return;
+        }
+        if (i === "bottom") {
+          t.style.top = s + "px", t.style.opacity = "1";
+          return;
+        }
+        if (i === "top") {
+          t.style.top = -e + "px", t.style.opacity = "1";
+          return;
+        }
+      } else {
+        if (p < o.x + l) {
+          const n = u - l;
+          o.x - Math.abs(n) < 0 ? t.style.left = (n < 0 ? n / 2 : n) + "px" : t.style.left = n + "px";
+        }
+        x < o.y + e + s ? o.y - e > 0 ? t.style.top = -e + "px" : p > w ? t.style.top = s + "px" : (t.style.position = "fixed", t.style.top = `calc(50vh - ${e / 2}px)`, t.style.left = `calc(50vw - ${l / 2}px)`) : t.style.top = s + "px", t.style.opacity = "1";
       }
-      if (l === "bottom") {
-        t.style.top = n + "px", t.style.opacity = "1";
-        return;
-      }
-      if (l === "top") {
-        t.style.top = -e + "px", t.style.opacity = "1";
-        return;
-      }
-      if (f < o.x + s) {
-        const i = u - s;
-        o.x - Math.abs(i) < 0 ? t.style.left = (i < 0 ? i / 2 : i) + "px" : t.style.left = i + "px";
-      }
-      x < o.y + e + n ? o.y - e > 0 ? t.style.top = -e + "px" : f > w ? t.style.top = n + "px" : (t.style.position = "fixed", t.style.top = `calc(50vh - ${e / 2}px)`, t.style.left = `calc(50vw - ${s / 2}px)`) : t.style.top = n + "px", t.style.opacity = "1";
     }
-  }, [a]), p;
+  }, [a, i]), f;
 };
 export {
   H as useDatePickerPosition