mimir-ui-kit 1.14.0 → 1.14.1

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,144 @@
+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

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

package/dist/components/Drawer/constants.js

@@ -0,0 +1,9 @@
+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

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

package/dist/components/Drawer/index.js

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

package/dist/components/Input/Input.d.ts

@@ -7,7 +7,7 @@ export type TProps = TInputProps & {
      */
     size?: TSize;
     /**
-     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     * `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
      */
     variant?: TVariant;
     /**
@@ -37,7 +37,7 @@ export declare const Input: import('react').MemoExoticComponent<import('react').
      */
     size?: TSize;
     /**
-     * `Варинты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
+     * `Варианты отображения ввода. Может быть 'alert', 'success', 'default', 'default-gray', 'default-white'.`
      */
     variant?: TVariant;
     /**

package/dist/components/Input/Input.js

@@ -1,31 +1,31 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { memo, forwardRef, useState, useEffect } from "react";
 import { c as classNames } from "../../index-CweZ_OcN.js";
+import { memo, forwardRef, useState, useEffect } from "react";
 import { EInputVariant } from "./constants.js";
-import '../../assets/Input.css';const label = "_label_1wv6m_5";
-const input = "_input_1wv6m_2";
-const s = "_s_1wv6m_61";
-const m = "_m_1wv6m_73";
-const l = "_l_1wv6m_5";
-const success = "_success_1wv6m_124";
-const alarm = "_alarm_1wv6m_142";
-const error = "_error_1wv6m_160";
-const disabled = "_disabled_1wv6m_178";
+import '../../assets/Input.css';const label = "_label_1sn09_5";
+const input = "_input_1sn09_2";
+const s = "_s_1sn09_61";
+const m = "_m_1sn09_73";
+const l = "_l_1sn09_5";
+const success = "_success_1sn09_124";
+const alarm = "_alarm_1sn09_142";
+const error = "_error_1sn09_160";
+const disabled = "_disabled_1sn09_178";
 const cls = {
-  "input-wrapper": "_input-wrapper_1wv6m_2",
+  "input-wrapper": "_input-wrapper_1sn09_2",
   label,
-  "active-label": "_active-label_1wv6m_18",
+  "active-label": "_active-label_1sn09_18",
   input,
   s,
   m,
   l,
-  "default-gray": "_default-gray_1wv6m_97",
-  "default-white": "_default-white_1wv6m_109",
+  "default-gray": "_default-gray_1sn09_97",
+  "default-white": "_default-white_1sn09_109",
   success,
   alarm,
   error,
   disabled,
-  "has-label": "_has-label_1wv6m_196"
+  "has-label": "_has-label_1sn09_198"
 };
 const Input = memo(
   forwardRef(
@@ -76,7 +76,8 @@ const Input = memo(
       const labelClassNames = classNames(
         cls.label,
         {
-          [cls["active-label"]]: isFocused || value
+          [cls["active-label"]]: isFocused || value,
+          [cls.disabled]: disabled2 || readonly
         },
         className,
         cls[size]

package/dist/components/InputPassword/InputPassword.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState } from "react";
-import { Input } from "../Input/Input.js";
-import { Button } from "../Button/Button.js";
 import { Icon } from "../../icons/Icon.js";
+import { Button } from "../Button/Button.js";
+import { Input } from "../Input/Input.js";
 import '../../assets/InputPassword.css';const input = "_input_mam1g_2";
 const wrapper = "_wrapper_mam1g_6";
 const button = "_button_mam1g_17";

package/dist/components/InputPhoneNumber/InputPhoneNumber.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
-import { Input } from "../Input/Input.js";
 import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
+import { Input } from "../Input/Input.js";
 const InputPhoneNumber = memo(
   forwardRef(
     ({ value = "", onChange, ...props }, ref) => {

package/dist/components/ListPhotos/ListPhotos.d.ts

@@ -0,0 +1,23 @@
+export type TListPhotos = {
+    /**
+     * Массив фото
+     */
+    value: TPhotosDetail[];
+    /**
+     * функция -callback, которая вызывается при изменении списка и передает обновленный список и deleteId,
+     */
+    onChange?: (e: TPhotoValue) => void;
+};
+export type TPhotoItem = {
+    id: number;
+    url: string;
+};
+export type TPhotoValue = {
+    deleteId?: number;
+    list: TPhotoItem[];
+};
+export type TPhotosDetail = {
+    id: number;
+    url: string;
+};
+export declare function ListPhotos({ value, onChange }: TListPhotos): import("react/jsx-runtime").JSX.Element;

package/dist/components/ListPhotos/ListPhotos.js

@@ -0,0 +1,33 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { Button } from "../Button/Button.js";
+import '../../assets/ListPhotos.css';const cls = {
+  "list-photos": "_list-photos_1k3c7_2"
+};
+function ListPhotos({ value, onChange }) {
+  const [list, setList] = useState(value);
+  useEffect(() => {
+    setList(value);
+  }, [value]);
+  const onDelete = async (id) => {
+    const newList = [...list.filter((el) => el.id !== id)];
+    setList(newList);
+    onChange == null ? void 0 : onChange({ deleteId: id, list: newList });
+  };
+  return /* @__PURE__ */ jsx("ul", { className: cls["list-photos"], children: list.map((el) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("img", { src: el.url, alt: "" }),
+    onChange && /* @__PURE__ */ jsx(
+      Button,
+      {
+        isIconButton: true,
+        iconName: "Close12px",
+        size: "m-s",
+        variant: "secondary-gray",
+        onClick: () => onDelete(el.id)
+      }
+    )
+  ] }, el.id)) });
+}
+export {
+  ListPhotos
+};

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

@@ -0,0 +1,3 @@
+import { TPhotosDetail } from './ListPhotos';
+
+export declare const photos: TPhotosDetail[];

package/dist/components/ListPhotos/constants.js

@@ -0,0 +1,21 @@
+const photos = [
+  {
+    id: 111,
+    url: "https://i.pinimg.com/736x/5a/e6/12/5ae612a7ecf50870c8f41961fefc332f.jpg"
+  },
+  {
+    id: 112,
+    url: "https://i1.sndcdn.com/artworks-rQAPPfrs44UvRwIz-WJkvyQ-t500x500.jpg"
+  },
+  {
+    id: 113,
+    url: "https://i1.sndcdn.com/avatars-000095020320-0pmjnu-t500x500.jpg"
+  },
+  {
+    id: 114,
+    url: "https://i1.sndcdn.com/avatars-000151937348-27m28p-t500x500.jpg"
+  }
+];
+export {
+  photos
+};

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

@@ -0,0 +1,2 @@
+export { ListPhotos } from './ListPhotos';
+export type { ListPhotos as TListPhotos } from './ListPhotos';

package/dist/components/ListPhotos/index.js

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

package/dist/components/MergedButton/MergedButton.d.ts

@@ -1,5 +1,5 @@
-import { TButtonProps } from '../Button';
 import { EMergedButtonVariantRound } from './constants';
+import { TButtonProps } from '../Button';
 
 export type TButtonPropsWithoutStyles = Omit<TButtonProps, 'clear' | 'variant' | 'form'> & {
     variant?: `${EMergedButtonVariantRound}` | EMergedButtonVariantRound;

package/dist/components/MergedButton/MergedButton.js

@@ -1,40 +1,38 @@
 import { jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { Button } from "../Button/Button.js";
+import { memo } from "react";
 import { EMergedButtonVariantRound } from "./constants.js";
-import '../../assets/MergedButton.css';const buttons = "_buttons_h653f_2";
-const button = "_button_h653f_2";
-const gray = "_gray_h653f_27";
-const white = "_white_h653f_35";
-const transparent = "_transparent_h653f_42";
+import { Button } from "../Button/Button.js";
+import '../../assets/MergedButton.css';const buttons = "_buttons_1s9fa_2";
+const gray = "_gray_1s9fa_28";
+const white = "_white_1s9fa_36";
+const transparent = "_transparent_1s9fa_44";
 const cls = {
   buttons,
-  button,
+  "merged-button": "_merged-button_1s9fa_6",
   gray,
   white,
   transparent,
-  "is-icon": "_is-icon_h653f_51"
+  "is-icon": "_is-icon_1s9fa_53"
 };
 const MergedButton = memo(({ buttons: buttons2 }) => {
   return /* @__PURE__ */ jsx("div", { className: cls.buttons, children: buttons2.map(
-    ({ variant = EMergedButtonVariantRound.White, disabled, ...button2 }, index) => {
+    ({ variant = EMergedButtonVariantRound.White, disabled, ...button }, index) => {
       const buttonProps = {
-        ...button2,
-        isIconButton: button2.isIconButton ?? false,
-        iconName: button2.isIconButton ? button2.iconName : void 0,
-        leftIcon: button2.isIconButton ? void 0 : button2.leftIcon,
-        rightIcon: button2.isIconButton ? void 0 : button2.rightIcon
+        ...button,
+        isIconButton: button.isIconButton ?? false,
+        iconName: button.isIconButton ? button.iconName : void 0,
+        leftIcon: button.isIconButton ? void 0 : button.leftIcon,
+        rightIcon: button.isIconButton ? void 0 : button.rightIcon
       };
       const className = classNames(
-        cls.button,
-        cls.clear,
+        cls["merged-button"],
         {
           [cls[variant]]: !disabled,
           [cls.disabled]: disabled,
-          [cls["is-icon"]]: button2.isIconButton
+          [cls["is-icon"]]: button.isIconButton
         },
-        button2.className
+        button.className
       );
       return /* @__PURE__ */ jsx(
         Button,

package/dist/components/OtpInput/OtpInput.js

@@ -1,15 +1,15 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, Fragment } from "react";
 import { c as classNames } from "../../index-CweZ_OcN.js";
-import { Input } from "../Input/Input.js";
+import { forwardRef, useImperativeHandle, Fragment } from "react";
 import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
 import { useOTPInput } from "./hooks.js";
-import '../../assets/OtpInput.css';const otp = "_otp_xwv60_3";
-const input = "_input_xwv60_15";
-const separator = "_separator_xwv60_29";
+import { Input } from "../Input/Input.js";
+import '../../assets/OtpInput.css';const otp = "_otp_1005h_3";
+const input = "_input_1005h_15";
+const separator = "_separator_1005h_29";
 const cls = {
   otp,
-  "input-wrapper": "_input-wrapper_xwv60_15",
+  "input-wrapper": "_input-wrapper_1005h_15",
   input,
   separator
 };

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,42 @@
+import { default as React } from 'react';
+
+export type TBackProps = {
+    currentPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TNextProps = {
+    currentPageNumber: number;
+    lastPageNumber: number;
+    onClick: (nextPage: number) => void;
+    setCurrentPage: (nextPage: number) => void;
+};
+export type TItemProps = {
+    currentPageNumber: number;
+    newPageNumber: number;
+    onClick: (pageNumber: number) => void;
+    setCurrentPage: (pageNumber: number) => void;
+};
+export type TProps = {
+    /**
+     * Класс, применяемый к корневому элемент
+     */
+    rootClassName?: string;
+    /**
+     * Выполнится при изменении страницы
+     */
+    onChange: (page: number) => void;
+    /**
+     * Всего элементов
+     */
+    total: number;
+    /**
+     * Элементов на странице
+     */
+    perPage?: number;
+    /**
+     * Текущая страница
+     */
+    currentPageNumber?: number;
+};
+export declare const Pagination: React.ForwardRefExoticComponent<TProps & React.RefAttributes<HTMLElement>>;