mimir-ui-kit 1.21.0 → 1.21.2

package/dist/hooks/index.js

@@ -5,6 +5,7 @@ import { useInterval } from "./useInterval/useInterval.js";
 import { useTimer } from "./useTimer/index.js";
 import { useCopyToClipboard } from "./useCopyToClipboard/useCopyToClipboard.js";
 import { useMergeRefs } from "./useMergeRefs/useMergeRefs.js";
+import { useResizeObserver } from "./useResizeObserver/useResizeObserver.js";
 export {
   EMediaQuery,
   EMinMediaQuery,
@@ -13,5 +14,6 @@ export {
   useLockBodyScroll,
   useMediaQuery,
   useMergeRefs,
+  useResizeObserver,
   useTimer
 };

package/dist/hooks/useResizeObserver/getElement.d.ts

@@ -0,0 +1,4 @@
+import { RefObject } from 'react';
+
+export type GetElementTarget = RefObject<Element | null | undefined> | (() => Element) | Element | Window | Document;
+export declare const getElement: <Target extends GetElementTarget>(target: Target) => Element | (Target & Document) | (Target & Window) | null | undefined;

package/dist/hooks/useResizeObserver/getElement.js

@@ -0,0 +1,18 @@
+const getElement = (target) => {
+  if (typeof target === "function") {
+    return target();
+  }
+  if (target instanceof Document) {
+    return target;
+  }
+  if (target instanceof Window) {
+    return target;
+  }
+  if (target instanceof Element) {
+    return target;
+  }
+  return target.current;
+};
+export {
+  getElement
+};

package/dist/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1 @@
+export { useResizeObserver } from './useResizeObserver';

package/dist/hooks/useResizeObserver/index.js

@@ -0,0 +1,4 @@
+import { useResizeObserver } from "./useResizeObserver.js";
+export {
+  useResizeObserver
+};

package/dist/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,17 @@
+import { RefObject } from 'react';
+
+export type UseResizeObserverTarget = RefObject<Element | null | undefined> | (() => Element) | Element;
+export interface UseResizeObserverOptions extends ResizeObserverOptions {
+    enabled?: boolean;
+    onChange?: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
+}
+export interface UseResizeObserverReturn {
+    entries: ResizeObserverEntry[];
+}
+export interface UseResizeObserver {
+    <Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(target: Target, options?: UseResizeObserverOptions): UseResizeObserverReturn;
+    <Target extends UseResizeObserverTarget | UseResizeObserverTarget[]>(options?: UseResizeObserverOptions, target?: never): UseResizeObserverReturn & {
+        ref: (node: Target) => void;
+    };
+}
+export declare const useResizeObserver: UseResizeObserver;

package/dist/hooks/useResizeObserver/useResizeObserver.js

@@ -0,0 +1,49 @@
+import { useState, useRef, useEffect } from "react";
+import { getElement } from "./getElement.js";
+const useResizeObserver = (...params) => {
+  const target = typeof params[0] === "object" && !("current" in params[0]) ? void 0 : params[0];
+  const options = target ? params[1] : params[0];
+  const enabled = (options == null ? void 0 : options.enabled) ?? true;
+  const [entries, setEntries] = useState([]);
+  const [internalRef, setInternalRef] = useState();
+  const internalOnChangeRef = useRef();
+  internalOnChangeRef.current = options == null ? void 0 : options.onChange;
+  useEffect(() => {
+    if (!enabled && !target && !internalRef) return;
+    if (Array.isArray(target)) {
+      if (!target.length) return;
+      const observer2 = new ResizeObserver((entries2) => {
+        var _a;
+        setEntries(entries2);
+        (_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer2);
+      });
+      target.forEach((target2) => {
+        const element2 = getElement(target2);
+        if (!element2) return;
+        observer2.observe(element2, options);
+      });
+      return () => {
+        observer2.disconnect();
+      };
+    }
+    const element = target ? getElement(target) : internalRef;
+    if (!element) return;
+    const observer = new ResizeObserver((entries2) => {
+      var _a;
+      setEntries(entries2);
+      (_a = internalOnChangeRef.current) == null ? void 0 : _a.call(internalOnChangeRef, entries2, observer);
+    });
+    observer.observe(element, options);
+    return () => {
+      observer.disconnect();
+    };
+  }, [internalRef, target, options == null ? void 0 : options.box, enabled]);
+  if (target) return { entries };
+  return {
+    ref: setInternalRef,
+    entries
+  };
+};
+export {
+  useResizeObserver
+};

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Button } from "./components/Button/Button.js";
-import { EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
+import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
 import { I } from "./Input-6mudFqTb.js";
 import { EInputSize, EInputVariant } from "./components/Input/constants.js";
 import { TextArea } from "./components/TextArea/TextArea.js";
@@ -50,6 +50,7 @@ import { useInterval } from "./hooks/useInterval/useInterval.js";
 import { useTimer } from "./hooks/useTimer/index.js";
 import { useCopyToClipboard } from "./hooks/useCopyToClipboard/useCopyToClipboard.js";
 import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
+import { useResizeObserver } from "./hooks/useResizeObserver/useResizeObserver.js";
 import { Icon } from "./icons/Icon.js";
 import { formating } from "./utils/index.js";
 import './assets/index.css';export {
@@ -62,6 +63,7 @@ import './assets/index.css';export {
   EAccordionSize,
   EButtonForm,
   EButtonSize,
+  EButtonVariantBorderless,
   EButtonVariantDefault,
   EButtonVariantOutline,
   EButtonVariantRound,
@@ -117,6 +119,7 @@ import './assets/index.css';export {
   useLockBodyScroll,
   useMediaQuery,
   useMergeRefs,
+  useResizeObserver,
   useTimer,
   useToast
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.21.0",
+  "version": "1.21.2",
   "type": "module",
   "exports": {
     ".": {

package/dist/assets/styles.css

@@ -1 +0,0 @@
-._input_3fxwe_2{padding-right:var(--space-3xl)}._input-wrapper_3fxwe_6{flex:1}._date-wrapper_3fxwe_10{position:relative;width:100%}._date-wrapper_3fxwe_10:hover ._input-wrapper_3fxwe_6{background-color:var(--input-bg-color-hover)}._date-wrapper_3fxwe_10:before{position:absolute;top:0;right:60px;bottom:0;left:0;z-index:3;cursor:pointer;content:""}[data-disabled=true] ._date-wrapper_3fxwe_10:before{cursor:auto}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6{background:var(--black-20)}[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 label,[data-disabled=true] ._date-wrapper_3fxwe_10 ._input-wrapper_3fxwe_6 input{color:var(--white)}[data-disabled=true] ._button-wrapper_3fxwe_35 svg{color:var(--white);fill:var(--white);cursor:default}._wrapper_3fxwe_41{position:relative;display:flex;align-items:center;border-radius:var(--control-radius-s)}._wrapper_3fxwe_41._active_3fxwe_47{border-bottom:1px solid var(--citrine-100)}._button-wrapper_3fxwe_35{position:absolute;top:0;right:0;z-index:2;display:flex;width:44px;height:100%;max-height:var(--button-height-xxl)}._button_3fxwe_35{align-self:center;background-color:transparent;border-radius:var(--control-radius-s)}._field-overlow_3fxwe_68{position:fixed;top:0;right:0;bottom:0;left:0;z-index:3}._calendar-block_3fxwe_74{position:absolute;z-index:3;display:flex;flex-direction:column;width:368px;max-height:none;padding:16px;font-weight:var(--font-weight-text-regular);font-size:var(--size-text-l);font-family:var(--font-inter);font-style:normal;line-height:var(--line-height-text-2xs);text-align:center;text-overflow:ellipsis;background:var(--white);border-radius:var(--control-radius-s);box-shadow:0 0 #16172705,0 2px 4px #16172705,0 6px 6px #16172705,0 15px 9px #16172703;opacity:0;transition:height .5s ease-in;font-feature-settings:"zero";font-variant-numeric:slashed-zero}._calendar-block_3fxwe_74 ._h_3fxwe_97{display:flex;width:100%;color:var(--black-100)}._calendar-block_3fxwe_74 ._b_3fxwe_35{display:grid;grid-template-columns:repeat(7,1fr)}._calendar-block_3fxwe_74 ._d_3fxwe_10{display:flex;flex:1;align-items:center;justify-content:center;color:var(--black-100);cursor:pointer;gap:4px}._calendar-block_3fxwe_74 ._m_3fxwe_118,._calendar-block_3fxwe_74 ._a_3fxwe_47,._calendar-block_3fxwe_74 ._prev_3fxwe_120{width:auto;height:48px;overflow:hidden}._calendar-block_3fxwe_74 ._m_3fxwe_118{display:flex;align-items:center;justify-content:center;color:var(--disabled)}._calendar-block_3fxwe_74 ._m_3fxwe_118 b{font-weight:var(--font-weight-text-regular)}._calendar-block_3fxwe_74 ._orange_3fxwe_136{color:var(--citrine-100)}._calendar-block_3fxwe_74 ._a_3fxwe_47{color:var(--black-100);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:var(--font-weight-text-regular);cursor:pointer}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:hover{background:var(--black-10)}._calendar-block_3fxwe_74 ._a_3fxwe_47 b:active{color:var(--white);background:var(--sapphire-100)}._calendar-block_3fxwe_74 ._current_3fxwe_161{background:var(--sapphire-10);border-radius:var(--control-radius-s)}._calendar-block_3fxwe_74 ._monthGrid_3fxwe_166{display:grid;grid-template-columns:repeat(3,1fr)}

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

@@ -1,9 +0,0 @@
-type MonthPickerModal = {
-    date: Date;
-    onChangeValue: (d: Date) => void;
-    setActive: (s: boolean) => void;
-    before?: Date;
-    onType?: (s: 'years') => void;
-};
-export declare function MonthPickerModal({ date, onChangeValue, before, onType }: MonthPickerModal): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DatePicker/MonthPickerModal.js

@@ -1,123 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { months } from "./constants.js";
-import { c as cls } from "../../styles.module-BZXDqssF.js";
-import { Icon } from "../../icons/Icon.js";
-import { formating } from "../../utils/index.js";
-import { Button } from "../Button/Button.js";
-function MonthPickerModal({
-  date,
-  onChangeValue,
-  before,
-  onType
-}) {
-  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;
-  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 next = () => {
-    setYear(year + 1);
-  };
-  const prev = () => {
-    setYear(year - 1);
-  };
-  const isBefore = (activeDate) => {
-    if (before) {
-      const beforeDate = before.getTime();
-      if (beforeDate > activeDate) return true;
-    }
-    return false;
-  };
-  const send = (searchDate) => {
-    if (isBefore(
-      (/* @__PURE__ */ new Date(
-        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
-      )).getTime()
-    ))
-      return;
-    onChangeValue(
-      /* @__PURE__ */ new Date(
-        `${year}-${formating.Number(2, searchDate)}-${formating.Number(2, selecte.d)}`
-      )
-    );
-  };
-  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: true,
-          iconName: "DropdownArrowLeft16px",
-          onClick: prev,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      ),
-      /* @__PURE__ */ jsxs("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"], children: [
-        year.toString(),
-        /* @__PURE__ */ jsx(Icon, { iconName: "DropdownArrowBottom16px" })
-      ] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowRight16px",
-          onClick: next,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: months.map((i, s) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: isBefore(
-          (/* @__PURE__ */ new Date(`${year}-${formating.Number(2, s + 1)}`)).getTime()
-        ) ? cls["m"] : cls["a"],
-        children: /* @__PURE__ */ jsx(
-          "b",
-          {
-            className: current.y === year && current.m === s + 1 ? cls["current"] : "",
-            onClick: () => send(s + 1),
-            children: i
-          }
-        )
-      },
-      s
-    )) })
-  ] }) });
-}
-export {
-  MonthPickerModal
-};

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

@@ -1,9 +0,0 @@
-type YearPickerModal = {
-    date: Date;
-    onChangeValue: (d: Date) => void;
-    setActive: (s: boolean) => void;
-    before?: Date;
-    onType?: (s: 'years') => void;
-};
-export declare function YearPickerModal({ date, onChangeValue, before, onType }: YearPickerModal): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/DatePicker/YearPickerModal.js

@@ -1,120 +0,0 @@
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { useRef, useState, useEffect } from "react";
-import { c as cls } from "../../styles.module-BZXDqssF.js";
-import { formating } from "../../utils/index.js";
-import { Button } from "../Button/Button.js";
-function YearPickerModal({
-  date,
-  onChangeValue,
-  before,
-  onType
-}) {
-  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 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(
-        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
-      )).getTime()
-    ))
-      return;
-    onChangeValue(
-      /* @__PURE__ */ new Date(
-        `${searchDate}-${formating.Number(2, selecte.m)}-${formating.Number(2, selecte.d)}`
-      )
-    );
-  };
-  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: true,
-          iconName: "DropdownArrowLeft16px",
-          onClick: prev,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { onClick: () => onType == null ? void 0 : onType("years"), className: cls["d"] }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          isIconButton: true,
-          iconName: "DropdownArrowRight16px",
-          onClick: next,
-          variant: "secondary-gray",
-          size: "l"
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: cls["monthGrid"], children: years.map((i, s) => /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: isBefore(
-          (/* @__PURE__ */ new Date(`${i}-${formating.Number(2, current.m)}`)).getTime()
-        ) ? cls["m"] : cls["a"],
-        children: /* @__PURE__ */ jsx(
-          "b",
-          {
-            className: current.y === i ? cls["current"] : "",
-            onClick: () => send(i),
-            children: i
-          }
-        )
-      },
-      s
-    )) })
-  ] }) });
-}
-export {
-  YearPickerModal
-};

package/dist/styles.module-BZXDqssF.js

@@ -1,36 +0,0 @@
-import './assets/styles.css';const input = "_input_3fxwe_2";
-const wrapper = "_wrapper_3fxwe_41";
-const active = "_active_3fxwe_47";
-const button = "_button_3fxwe_35";
-const h = "_h_3fxwe_97";
-const b = "_b_3fxwe_35";
-const d = "_d_3fxwe_10";
-const m = "_m_3fxwe_118";
-const a = "_a_3fxwe_47";
-const prev = "_prev_3fxwe_120";
-const orange = "_orange_3fxwe_136";
-const current = "_current_3fxwe_161";
-const monthGrid = "_monthGrid_3fxwe_166";
-const cls = {
-  input,
-  "input-wrapper": "_input-wrapper_3fxwe_6",
-  "date-wrapper": "_date-wrapper_3fxwe_10",
-  "button-wrapper": "_button-wrapper_3fxwe_35",
-  wrapper,
-  active,
-  button,
-  "field-overlow": "_field-overlow_3fxwe_68",
-  "calendar-block": "_calendar-block_3fxwe_74",
-  h,
-  b,
-  d,
-  m,
-  a,
-  prev,
-  orange,
-  current,
-  monthGrid
-};
-export {
-  cls as c
-};