mimir-ui-kit 1.4.1 → 1.5.0

package/dist/hooks/index.d.ts

@@ -1,2 +1 @@
 export { useMediaQuery, EMediaQuery } from './useMediaQuery';
-export { useLockBodyScroll } from './useLockBodyScroll';

package/dist/hooks/index.js

@@ -1,8 +1,6 @@
 import { useMediaQuery } from "./useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./useMediaQuery/constants.js";
-import { useLockBodyScroll } from "./useLockBodyScroll/useLockBodyScroll.js";
 export {
   EMediaQuery,
-  useLockBodyScroll,
   useMediaQuery
 };

package/dist/index.js

@@ -12,24 +12,19 @@ import { EMergedButtonVariantRound } from "./components/MergedButton/constants.j
 import { AppImage } from "./components/Image/Image.js";
 import { Loader } from "./components/Loader/Loader.js";
 import { Slider } from "./components/Slider/Slider.js";
-import { Drawer } from "./components/Drawer/Drawer.js";
-import { EDrawerPosition } from "./components/Drawer/constants.js";
 import { Steps } from "./components/Steps/Steps.js";
 import { EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize } from "./components/Steps/constants.js";
 import { Vote } from "./components/Vote/Vote.js";
 import { EVoteSize } from "./components/Vote/constants.js";
 import { useMediaQuery } from "./hooks/useMediaQuery/useMediaQuery.js";
 import { EMediaQuery } from "./hooks/useMediaQuery/constants.js";
-import { useLockBodyScroll } from "./hooks/useLockBodyScroll/useLockBodyScroll.js";
 import { Icon } from "./icons/Icon.js";
 import './assets/index.css';export {
   Button,
-  Drawer,
   EButtonForm,
   EButtonSize,
   EButtonVariantDefault,
   EButtonVariantRound,
-  EDrawerPosition,
   EInputSize,
   EInputVariant,
   EMediaQuery,
@@ -52,6 +47,5 @@ import './assets/index.css';export {
   Vote,
   getMaskedInputPhoneValue,
   getUnmaskedInputValue,
-  useLockBodyScroll,
   useMediaQuery
 };

package/package.json

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

package/dist/assets/Drawer.css

@@ -1 +0,0 @@
-._drawer_vy4rv_3{--drawer-width: 808px;--drawer-z-index: 1000;position:fixed;z-index:1000;z-index:var(--drawer-z-index);display:flex;flex-direction:column;width:808px;width:var(--drawer-width);height:100%;overflow:auto;background-color:var(--black-5);transition:all .3s ease;pointer-events:none}._drawer_vy4rv_3 ._content_vy4rv_17{position:relative;z-index:var(--modal-z-index);display:flex;flex:1;flex-direction:column;padding:var(--space-m) var(--space-4xl) var(--space-4xl);transition:all .3s ease}@media (max-width: 600px){._drawer_vy4rv_3 ._content_vy4rv_17{--drawer-width: 100%;padding:var(--space-m)}}._drawer_vy4rv_3 ._header_vy4rv_32{display:flex;gap:var(--space-xs);height:68px}._drawer_vy4rv_3 ._header_vy4rv_32:not(:last-child){margin-bottom:var(--space-2xl)}._drawer_vy4rv_3 ._header_vy4rv_32 ._title_vy4rv_40{flex:1;align-self:flex-end;font-weight:var(--font-weight-text-medium);font-size:var(--size-text-xl3);line-height:var(--line-height-text-s1);letter-spacing:.7px}@media (max-width: 600px){._drawer_vy4rv_3 ._header_vy4rv_32 ._title_vy4rv_40{font-size:var(--size-text-xl2);line-height:var(--line-height-text-xs)}}._drawer_vy4rv_3 ._header_vy4rv_32 ._space_vy4rv_54{flex:0 0 var(--button-height-m)}@media (max-width: 600px){._drawer_vy4rv_3 ._header_vy4rv_32{height:55px}._drawer_vy4rv_3 ._header_vy4rv_32:not(:last-child){margin-bottom:var(--space-m)}}._drawer_vy4rv_3 ._inner_vy4rv_65{flex:1}._drawer_vy4rv_3 ._button_vy4rv_68{position:absolute;top:var(--space-m);right:var(--space-m)}._drawer_vy4rv_3 ._footer_vy4rv_73{display:block;padding-top:var(--space-4xl)}@media (max-width: 600px){._drawer_vy4rv_3 ._footer_vy4rv_73{padding-top:var(--space-m)}}._drawer_vy4rv_3 ._footer-button_vy4rv_82{display:block;margin-left:auto}._drawer_vy4rv_3._left_vy4rv_86{top:0;left:-100%}._drawer_vy4rv_3._right_vy4rv_90{top:0;right:-100%}._drawer_vy4rv_3._bottom_vy4rv_94{right:50%;bottom:-100%;left:50%;max-height:80vh;border-top-left-radius:var(--control-radius);border-top-right-radius:var(--control-radius);transform:translate(-50%)}._drawer_vy4rv_3._opened_vy4rv_103{transition:all .3s ease;pointer-events:auto}._drawer_vy4rv_3._opened_vy4rv_103._left_vy4rv_86{left:0%;transition:left .3s ease}._drawer_vy4rv_3._opened_vy4rv_103._right_vy4rv_90{right:0%;transition:right .3s ease}._drawer_vy4rv_3._opened_vy4rv_103._bottom_vy4rv_94{bottom:0%}._drawer_vy4rv_3._is-closing_vy4rv_118._left_vy4rv_86{left:-100%}._drawer_vy4rv_3._is-closing_vy4rv_118._right_vy4rv_90{right:-100%}._drawer_vy4rv_3._is-closing_vy4rv_118._bottom_vy4rv_94{bottom:-100%}@media (max-width: 1440px){._drawer_vy4rv_3{--drawer-width: 608px}}@media (max-width: 1280px){._drawer_vy4rv_3{--drawer-width: 648px}}@media (max-width: 768px){._drawer_vy4rv_3{--drawer-width: 584px}}@media (max-width: 600px){._drawer_vy4rv_3{--drawer-width: 100%}._drawer_vy4rv_3._bottom_vy4rv_94{max-width:359px}}._overlay_vy4rv_151{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#0009;opacity:0;transition:all .3s ease}._overlay_vy4rv_151._opened_vy4rv_103{opacity:1;transition:all .3s ease}._overlay_vy4rv_151._is-closing_vy4rv_118{opacity:0;transition:all .3s ease}

package/dist/components/Drawer/Drawer.d.ts

@@ -1,38 +0,0 @@
-import { PropsWithChildren, ReactNode } from 'react';
-import { EDrawerPosition } from './constants';
-
-type TProps = {
-    /**
-     * Обязательный заголовок.
-     */
-    title: string;
-    /**
-     * Флаг отвечачающий за показ/скрытие.
-     */
-    isOpen?: boolean;
-    /**
-     * Настраиваемый паддинг для body, что бы избежать скачка контента при overflow: hidden
-     */
-    paddingRight?: number;
-    /**
-     * Функция закрытия шторки
-     */
-    onClose?: VoidFunction;
-    /**
-     * Дополнительный класс для родительской обертки.
-     */
-    className?: string;
-    /**
-     * Позиция шторки.
-     */
-    position?: `${EDrawerPosition}` | EDrawerPosition;
-    /**
-     * Кастомный footer. По дефолту в нем расположена кнопка для закрытия.
-     */
-    footer?: ReactNode;
-};
-/**
- * Компонент шторки, который может выезжать слева, справа или внизу.
- */
-export declare const Drawer: ({ isOpen, onClose, title, className, position, paddingRight, footer, children }: PropsWithChildren<TProps>) => import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/components/Drawer/Drawer.js

@@ -1,144 +0,0 @@
-import { jsxs, jsx } 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 { Button } from "../Button/Button.js";
-import { EButtonVariantDefault, EButtonSize } from "../Button/constants.js";
-import { Portal } from "../Portal/Portal.js";
-import '../../assets/Drawer.css';const drawer = "_drawer_vy4rv_3";
-const content = "_content_vy4rv_17";
-const header = "_header_vy4rv_32";
-const title = "_title_vy4rv_40";
-const space = "_space_vy4rv_54";
-const inner = "_inner_vy4rv_65";
-const button = "_button_vy4rv_68";
-const footer = "_footer_vy4rv_73";
-const left = "_left_vy4rv_86";
-const right = "_right_vy4rv_90";
-const bottom = "_bottom_vy4rv_94";
-const opened = "_opened_vy4rv_103";
-const overlay = "_overlay_vy4rv_151";
-const cls = {
-  drawer,
-  content,
-  header,
-  title,
-  space,
-  inner,
-  button,
-  footer,
-  "footer-button": "_footer-button_vy4rv_82",
-  left,
-  right,
-  bottom,
-  opened,
-  "is-closing": "_is-closing_vy4rv_118",
-  overlay
-};
-const ANIMATION_DELAY = 300;
-const Drawer = ({
-  isOpen,
-  onClose,
-  title: title2,
-  className,
-  position = EDrawerPosition.RIGHT,
-  paddingRight = 8,
-  footer: footer2,
-  children
-}) => {
-  const [isClosing, setIsClosing] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-  const [isBodyScrollLocked, setIsBodyScrollLocked] = useState(false);
-  const timerRef = useRef();
-  const contentRef = useRef(null);
-  const isBottomPosition = position === EDrawerPosition.BOTTOM;
-  const isMobile = useMediaQuery(EMediaQuery.XS1);
-  useLockBodyScroll({
-    on: isBodyScrollLocked,
-    paddingRight
-  });
-  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();
-      }
-    },
-    [handleClose]
-  );
-  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
-  };
-  if (!isOpen) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Portal, { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        "aria-hidden": isOpen,
-        role: "dialog",
-        style: {
-          minHeight: isBottomPosition && contentRef.current ? contentRef.current.offsetHeight : void 0
-        },
-        className: classNames(cls.drawer, cls[position], mods, className),
-        children: /* @__PURE__ */ jsxs("section", { className: classNames(cls.content, cls[position]), children: [
-          /* @__PURE__ */ jsxs("header", { className: cls.header, children: [
-            /* @__PURE__ */ jsx("h2", { className: cls.title, children: title2 }),
-            /* @__PURE__ */ jsx("div", { className: cls.space, children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: EButtonVariantDefault.SecondaryWhite,
-                isIconButton: true,
-                size: isMobile ? EButtonSize.S : EButtonSize.M,
-                iconName: "Close16px",
-                onClick: handleClose,
-                className: cls.button
-              }
-            ) })
-          ] }),
-          /* @__PURE__ */ jsx("div", { ref: contentRef, className: cls.inner, children }),
-          /* @__PURE__ */ jsx("footer", { className: cls.footer, children: footer2 || /* @__PURE__ */ jsx(
-            Button,
-            {
-              size: isMobile ? EButtonSize.M : EButtonSize.XXL,
-              full: isMobile,
-              onClick: handleClose,
-              className: cls["footer-button"],
-              children: "Закрыть"
-            }
-          ) })
-        ] })
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: classNames(cls.overlay, mods), onClick: handleClose })
-  ] });
-};
-export {
-  Drawer
-};

package/dist/components/Drawer/constants.d.ts

@@ -1,5 +0,0 @@
-export declare enum EDrawerPosition {
-    LEFT = "left",
-    RIGHT = "right",
-    BOTTOM = "bottom"
-}

package/dist/components/Drawer/constants.js

@@ -1,9 +0,0 @@
-var EDrawerPosition = /* @__PURE__ */ ((EDrawerPosition2) => {
-  EDrawerPosition2["LEFT"] = "left";
-  EDrawerPosition2["RIGHT"] = "right";
-  EDrawerPosition2["BOTTOM"] = "bottom";
-  return EDrawerPosition2;
-})(EDrawerPosition || {});
-export {
-  EDrawerPosition
-};

package/dist/components/Drawer/index.d.ts

@@ -1,2 +0,0 @@
-export { Drawer } from './Drawer';
-export { EDrawerPosition } from './constants';

package/dist/components/Drawer/index.js

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

package/dist/components/Portal/Portal.d.ts

@@ -1,7 +0,0 @@
-import { PropsWithChildren } from 'react';
-
-type TProps = {
-    element?: HTMLElement;
-};
-export declare const Portal: ({ element, children }: PropsWithChildren<TProps>) => import('react').ReactPortal;
-export {};

package/dist/components/Portal/Portal.js

@@ -1,10 +0,0 @@
-import { createPortal } from "react-dom";
-const Portal = ({
-  element = document.body,
-  children
-}) => {
-  return createPortal(children, element);
-};
-export {
-  Portal
-};

package/dist/components/Portal/index.d.ts

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

package/dist/components/Portal/index.js

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

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

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

package/dist/hooks/useLockBodyScroll/index.js

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

package/dist/hooks/useLockBodyScroll/useLockBodyScroll.d.ts

@@ -1,6 +0,0 @@
-type TUseLockBodyScroll = {
-    on?: boolean;
-    paddingRight?: number;
-};
-export declare function useLockBodyScroll({ on, paddingRight }: TUseLockBodyScroll): void;
-export {};

package/dist/hooks/useLockBodyScroll/useLockBodyScroll.js

@@ -1,20 +0,0 @@
-import { useLayoutEffect } from "react";
-function useLockBodyScroll({ on, paddingRight }) {
-  useLayoutEffect(() => {
-    const hasVerticalScrollbar = document.documentElement.scrollHeight > document.documentElement.clientHeight;
-    if (!on || !hasVerticalScrollbar) return;
-    const originalStyle = window.getComputedStyle(document.body).overflow;
-    const originalPaddingStyle = window.getComputedStyle(
-      document.body
-    ).paddingRight;
-    document.body.style.overflow = "hidden";
-    document.body.style.paddingRight = `${paddingRight}px`;
-    return () => {
-      document.body.style.overflow = originalStyle;
-      document.body.style.paddingRight = originalPaddingStyle;
-    };
-  }, [on, paddingRight]);
-}
-export {
-  useLockBodyScroll
-};