mimir-ui-kit 1.15.1 → 1.16.0

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

@@ -1,3 +1,3 @@
 export { SelectSearch } from './SelectSearch';
-export type { TSelectSearchProps } from './types';
+export type { TSelectSearchProps, TSelectOption } from './types';
 export { ESelectSearchSize } from './constants';

package/dist/components/SelectSearch/types.d.ts

@@ -1,15 +1,21 @@
+import { ReactNode } from 'react';
 import { ESelectSearchSize } from './constants';
-import { VirtualizedFixedSizeListProps } from './SelectSearch';
 
+export type TSelectOption = {
+    name: string;
+    id: number | string;
+    bottom?: ReactNode;
+    [index: string]: unknown;
+};
 export type TSelectSearchProps = {
     /**
      * Текущее выбранное значение.
      */
-    value?: Record<string, unknown> | null;
+    value?: TSelectOption | null;
     /**
      * Функция обратного вызова при изменении выбранного значения.
      */
-    onChange?: (value: Record<string, unknown>) => void;
+    onChange?: (value: TSelectOption) => void;
     /**
      * Текст-подсказка для поля ввода.
      */
@@ -22,19 +28,18 @@ export type TSelectSearchProps = {
      * Флаг для растягивания компонента на всю ширину контейнера.
      */
     full?: boolean;
-    /**
-     * Дочерние элементы компонента.
-     */
-    children?: React.ReactNode;
-    /**
-     * Свойства для виртуализированного списка фиксированного размера.
-     */
-    virtualizedFixedSizeList?: VirtualizedFixedSizeListProps;
     /**
      * Значение, отображаемое в поле выбора.
      */
     displayValue?: string;
+    /** Показывать ли иконку стрелки выпадающего списка */
     showArrow?: boolean;
+    /** Функция обратного вызова, срабатывающая при изменении поискового запроса */
     onSearch?: (value: string) => void;
+    /** Фильтровать ли варианты на основе поискового запроса */
     filterOnSearch?: boolean;
+    /** Значения, передаваемые в SelectSearch */
+    items: TSelectOption[];
+    /** Класснейм для значения */
+    classNameOption?: string;
 };

package/dist/components/TextArea/TextArea.d.ts

@@ -0,0 +1,5 @@
+import { TTextAreaProps } from './types';
+import { TAdditionalProps } from '../Input';
+
+export type TProps = TAdditionalProps & TTextAreaProps;
+export declare const TextArea: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<TAdditionalProps & TTextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>>;

package/dist/components/TextArea/TextArea.js

@@ -0,0 +1,209 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { memo, forwardRef, useState, useRef, useEffect } from "react";
+import { useAutoResizeTextArea } from "./hooks.js";
+import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
+import { Icon } from "../../icons/Icon.js";
+import { Button } from "../Button/Button.js";
+import { c as cls } from "../../Input-BFFPzelg.js";
+import { EInputVariant } from "../Input/constants.js";
+import '../../assets/TextArea.css';const textarea = "_textarea_46c4k_2";
+const s = "_s_46c4k_6";
+const m = "_m_46c4k_11";
+const l = "_l_46c4k_16";
+const textareaCls = {
+  textarea,
+  s,
+  m,
+  l,
+  "has-label": "_has-label_46c4k_21"
+};
+const renderAddon = (addon) => {
+  var _a, _b;
+  if (!addon) {
+    return null;
+  }
+  switch (addon.addonType) {
+    case "icon": {
+      const is16px = (_a = addon.addonContent) == null ? void 0 : _a.includes("16px");
+      const is24px = (_b = addon.addonContent) == null ? void 0 : _b.includes("24px");
+      return /* @__PURE__ */ jsx(
+        Icon,
+        {
+          style: {
+            ["--icon-size"]: classNames({
+              "16px": is16px,
+              "24px": is24px
+            })
+          },
+          className: cls["addon-icon"],
+          iconName: addon.addonContent
+        }
+      );
+    }
+    case "text": {
+      return addon.addonContent;
+    }
+    default: {
+      return null;
+    }
+  }
+};
+const TextArea = memo(
+  forwardRef(
+    (props, ref) => {
+      const {
+        value,
+        className,
+        wrapperClassName,
+        variant = EInputVariant.DefaultGray,
+        autofocus,
+        readonly,
+        id,
+        onFocus,
+        onBlur,
+        label,
+        withClearButton,
+        disabled,
+        rightAddon,
+        leftAddon,
+        size = "m",
+        ...otherProps
+      } = props;
+      const [isFocused, setIsFocused] = useState(autofocus);
+      const [withValue, setWithValue] = useState(!!value);
+      const inputRef = useRef(null);
+      const mergedInputRef = useMergeRefs(inputRef, ref);
+      useEffect(() => {
+        if (autofocus) {
+          setIsFocused(true);
+        }
+      }, [autofocus]);
+      const handleResize = useAutoResizeTextArea(inputRef.current);
+      const handleBlur = (event) => {
+        const currentValue = event.currentTarget.value;
+        onBlur == null ? void 0 : onBlur(event);
+        if (currentValue) {
+          return;
+        }
+        setIsFocused(false);
+      };
+      const handleFocus = (event) => {
+        if (readonly) {
+          return;
+        }
+        setIsFocused(true);
+        onFocus == null ? void 0 : onFocus(event);
+      };
+      const handleClear = () => {
+        if (inputRef == null ? void 0 : inputRef.current) {
+          inputRef.current.value = "";
+          inputRef.current.focus();
+          setWithValue(false);
+          handleResize();
+        }
+      };
+      const handleChange = (event) => {
+        var _a;
+        const targetValue = event.target.value;
+        setWithValue(!!targetValue);
+        handleResize();
+        (_a = otherProps == null ? void 0 : otherProps.onChange) == null ? void 0 : _a.call(otherProps, event);
+      };
+      const currentLeftAddon = renderAddon(leftAddon);
+      const currentRightAddon = renderAddon(rightAddon);
+      const mods = {
+        [cls.readonly]: disabled || readonly,
+        [cls.focused]: isFocused || withValue,
+        [cls.disabled]: disabled || readonly,
+        [cls["has-left-slot"]]: !!currentLeftAddon,
+        [cls["has-right-slot"]]: !!currentRightAddon,
+        [textareaCls["has-label"]]: !!label
+      };
+      const labelClassNames = classNames(
+        cls.label,
+        {
+          [cls["active-label"]]: isFocused || value,
+          [cls.disabled]: disabled || readonly,
+          [cls["has-left-slot"]]: !!currentLeftAddon
+        },
+        className,
+        cls[size]
+      );
+      const inputClassNames = classNames(
+        textareaCls.textarea,
+        cls.input,
+        mods,
+        className,
+        [cls[variant], textareaCls[size], cls[size]]
+      );
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(
+            cls["input-wrapper"],
+            cls[variant],
+            textareaCls[size],
+            cls[size],
+            { [cls.focused]: isFocused || withValue },
+            wrapperClassName
+          ),
+          children: [
+            label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label }),
+            currentLeftAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["left-slot"], {
+                  [cls.focused]: isFocused,
+                  [cls["has-label"]]: !!label
+                }),
+                children: currentLeftAddon
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "textarea",
+              {
+                ref: mergedInputRef,
+                id,
+                className: inputClassNames,
+                onFocus: handleFocus,
+                onBlur: handleBlur,
+                readOnly: readonly,
+                value,
+                onChange: handleChange,
+                ...otherProps
+              }
+            ),
+            currentRightAddon && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: classNames(cls["right-slot"], {
+                  [cls.focused]: isFocused,
+                  [cls["has-label"]]: !!label
+                }),
+                children: currentRightAddon
+              }
+            ),
+            withClearButton && withValue && /* @__PURE__ */ jsx(
+              Button,
+              {
+                tabIndex: -1,
+                className: cls.clear,
+                isIconButton: true,
+                iconName: "Close16px",
+                size: "m-s",
+                clear: true,
+                variant: "secondary-gray",
+                onClick: handleClear
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+TextArea.displayName = "TextArea";
+export {
+  TextArea
+};

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

@@ -0,0 +1 @@
+export declare const useAutoResizeTextArea: (textArea: HTMLTextAreaElement | null) => () => void;

package/dist/components/TextArea/hooks.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+const useAutoResizeTextArea = (textArea) => {
+  return useCallback(() => {
+    if (textArea) {
+      textArea.style.height = "var(--textarea-height)";
+      const scrollHeight = textArea.scrollHeight;
+      textArea.style.height = `${scrollHeight}px`;
+    }
+  }, [textArea]);
+};
+export {
+  useAutoResizeTextArea
+};

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

@@ -0,0 +1 @@
+export { TextArea, type TProps as TTextAreaProps } from './TextArea';

package/dist/components/TextArea/index.js

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

package/dist/components/TextArea/types.d.ts

@@ -0,0 +1,3 @@
+import { TextareaHTMLAttributes } from 'react';
+
+export type TTextAreaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'readOnly' | 'size' | 'placeholder'>;

package/dist/components/TextArea/types.js

@@ -0,0 +1 @@
+

package/dist/components/Toasts/ProgressBar.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../index-CweZ_OcN.js";
 import "react";
 import "./constants.js";
-import { P } from "../../ProgressBar-BekX41HR.js";
+import { P } from "../../ProgressBar-CwLwhaeM.js";
 export {
   P as ProgressBar
 };

package/dist/components/Toasts/Toast.js

@@ -2,7 +2,7 @@ import { jsxs, jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, useRef } from "react";
 import { ANIMATION_VARIABLES_MAP, EToastPosition, EToastVariant, DEFAULT_TOAST_DURATION } from "./constants.js";
-import { c as cls, P as ProgressBar } from "../../ProgressBar-BekX41HR.js";
+import { c as cls, P as ProgressBar } from "../../ProgressBar-CwLwhaeM.js";
 import { useTimer } from "../../hooks/useTimer/index.js";
 import { Button } from "../Button/Button.js";
 const Toast = memo(

package/dist/components/Toasts/ToastList.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, useRef, useCallback, useEffect } from "react";
 import { EToastPosition } from "./constants.js";
-import { c as cls } from "../../ProgressBar-BekX41HR.js";
+import { c as cls } from "../../ProgressBar-CwLwhaeM.js";
 import { Toast } from "./Toast.js";
 const ToastList = memo(
   ({ toasts, position = EToastPosition.TOP_RIGHT, onToastRemove }) => {

package/dist/components/Toasts/ToastsProvider.js

@@ -3,7 +3,7 @@ import { useReducer, useCallback, useMemo } from "react";
 import { EToastVariant } from "./constants.js";
 import { ToastContext } from "./hooks.js";
 import { reducer, initialState, actionCreators } from "./store.js";
-import { c as cls } from "../../ProgressBar-BekX41HR.js";
+import { c as cls } from "../../ProgressBar-CwLwhaeM.js";
 import { ToastList } from "./ToastList.js";
 const ToastProvider = ({ children }) => {
   const [toasts, dispatch] = useReducer(reducer, initialState);

package/dist/components/Uploader/Uploader.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { imageTypesArr } from './constants';
 
 export type TUploader = {
@@ -18,6 +19,14 @@ export type TUploader = {
      * Максимальный размер файлов.
      */
     maxSize: number;
+    /**
+     * Максимальное количество файлов.
+     */
+    maxFiles: number;
+    /**
+     * Выключен ли Uploader или нет
+     */
+    isDisabled?: boolean;
 };
 export type TUploadValue = {
     value: TFileItem[];
@@ -27,4 +36,4 @@ export type TFileItem = {
     id: number;
     file: File;
 };
-export declare function Uploader({ filesType, onChangeValue, arrayName, maxSize }: TUploader): import("react/jsx-runtime").JSX.Element;
+export declare const Uploader: React.ForwardRefExoticComponent<TUploader & React.RefAttributes<HTMLDivElement>>;

package/dist/components/Uploader/Uploader.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useId, useRef } from "react";
+import { forwardRef, useRef, useId } from "react";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
 import '../../assets/Uploader.css';const cls = {
@@ -25,67 +25,73 @@ const filesTyps = ["jpeg", "jpg", "png", "tiff", "gif"];
 const generateId = (min, max) => {
   return Math.random() * (max - min) + min;
 };
-function Uploader({
-  filesType = filesTyps,
-  onChangeValue,
-  arrayName,
-  maxSize = 15
-}) {
-  const idImg = useId();
-  const ref = useRef(null);
-  const onChange = (e) => {
-    if (e.target.files && e.target.files[0]) {
-      const list = [];
-      Array.from(e.target.files).forEach((el) => {
-        if (filesType.map((name) => MIME[name]).includes(el.type) && el.size / 1024 ** 2 <= maxSize) {
-          list.push({ file: el, id: generateId(1, 100) });
-        }
-      });
-      onChangeValue({ arrayName, value: list });
-    }
-  };
-  const onOpen = () => {
-    var _a;
-    (_a = ref.current) == null ? void 0 : _a.click();
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cls["upload-file__wrapper"], children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        type: "file",
-        className: cls["upload-file-input"],
-        "aria-label": "Upload",
-        name: "image[]",
-        multiple: true,
-        onChange,
-        title: "",
-        id: idImg,
-        accept: filesType.map((i) => MIME[i]).join()
+const Uploader = forwardRef(
+  (props, ref) => {
+    const {
+      filesType = filesTyps,
+      onChangeValue,
+      arrayName,
+      maxSize = 15,
+      isDisabled
+    } = props;
+    const uploaderRef = useRef(null);
+    const idImg = useId();
+    const onChange = (e) => {
+      if (e.target.files && e.target.files[0]) {
+        const list = [];
+        Array.from(e.target.files).forEach((el) => {
+          if (filesType.map((name) => MIME[name]).includes(el.type) && el.size / 1024 ** 2 <= maxSize) {
+            list.push({ file: el, id: generateId(1, 100) });
+          }
+        });
+        onChangeValue({ arrayName, value: list });
       }
-    ),
-    /* @__PURE__ */ jsxs("label", { htmlFor: idImg, ref, children: [
+    };
+    const onOpen = () => {
+      var _a;
+      (_a = uploaderRef.current) == null ? void 0 : _a.click();
+    };
+    return /* @__PURE__ */ jsxs("div", { className: cls["upload-file__wrapper"], ref, children: [
       /* @__PURE__ */ jsx(
-        Button,
+        "input",
         {
-          size: "m",
-          variant: "secondary-asphalt",
-          leftIcon: /* @__PURE__ */ jsx(Icon, { iconName: "UnionIcon16px" }),
-          onClick: onOpen,
-          children: "Выберите файлы"
+          type: "file",
+          className: cls["upload-file-input"],
+          "aria-label": "Upload",
+          name: "image[]",
+          multiple: true,
+          onChange,
+          title: "",
+          id: idImg,
+          accept: filesType.map((i) => MIME[i]).join(),
+          disabled: isDisabled
         }
       ),
-      /* @__PURE__ */ jsx("b", { children: "Или перетащие сюда" }),
-      /* @__PURE__ */ jsxs("span", { className: cls["upload-text"], children: [
-        "Максимальный размер одного файла – ",
-        maxSize,
-        " Мб",
-        /* @__PURE__ */ jsx("br", {}),
-        "Загрузить можно файлы следующих форматов: ",
-        filesType.join(", ")
+      /* @__PURE__ */ jsxs("label", { htmlFor: idImg, ref: uploaderRef, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "m",
+            variant: "secondary-asphalt",
+            leftIcon: /* @__PURE__ */ jsx(Icon, { iconName: "UnionIcon16px" }),
+            onClick: onOpen,
+            disabled: isDisabled,
+            children: "Выберите файлы"
+          }
+        ),
+        /* @__PURE__ */ jsx("b", { children: "Или перетащите сюда" }),
+        /* @__PURE__ */ jsxs("span", { className: cls["upload-text"], children: [
+          "Максимальный размер одного файла – ",
+          maxSize,
+          " Мб",
+          /* @__PURE__ */ jsx("br", {}),
+          "Загрузить можно файлы следующих форматов: ",
+          filesType.join(", ")
+        ] })
       ] })
-    ] })
-  ] });
-}
+    ] });
+  }
+);
 export {
   Uploader
 };

package/dist/components/UploaderPhotos/UploaderPhotos.d.ts

@@ -1,3 +1,4 @@
+import { TPhotosDetail } from '../ListPhotos/ListPhotos';
 import { imageTypesArr } from '../Uploader/constants';
 import { TFileItem } from '../Uploader/Uploader';
 
@@ -21,9 +22,17 @@ export type TUploaderPhotos = {
      * type:'delete' в data передает id удаленного файла
      */
     onChange: (j: TOnChangePhotosUpdate) => void;
+    /**
+     * Передаваемые файлы.
+     */
+    value?: TPhotosDetail[];
+    /**
+     * Максимальное количество файлов.
+     */
+    maxFiles: number;
 };
 export type TOnChangePhotosUpdate = {
     type: string;
     data: TFileItem[] | number;
 };
-export declare function UploaderPhotos({ filesType, arrayName, maxSize, onChange }: TUploaderPhotos): import("react/jsx-runtime").JSX.Element;
+export declare const UploaderPhotos: import('react').ForwardRefExoticComponent<TUploaderPhotos & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/UploaderPhotos/UploaderPhotos.js

@@ -1,46 +1,62 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { c as classNames } from "../../index-CweZ_OcN.js";
+import { forwardRef, useState, useEffect } from "react";
 import { ListPhotos } from "../ListPhotos/ListPhotos.js";
 import { Uploader } from "../Uploader/Uploader.js";
 import '../../assets/UploaderPhotos.css';const cls = {
-  "upload-file__wrapper": "_upload-file__wrapper_udscq_2"
+  "upload-file__wrapper": "_upload-file__wrapper_17bcu_2"
 };
-function UploaderPhotos({
-  filesType,
-  arrayName,
-  maxSize,
-  onChange
-}) {
-  const [photos, setPhotos] = useState([]);
-  const onChangeValue = (e) => {
-    setPhotos([
-      ...photos,
-      ...e.value.map((el) => {
-        return {
+const UploaderPhotos = forwardRef(
+  (props, ref) => {
+    const { filesType, arrayName, maxSize, onChange, value, maxFiles } = props;
+    const [photos, setPhotos] = useState(value || []);
+    const isMaxFilesReached = photos.length >= maxFiles;
+    useEffect(() => {
+      if (value) {
+        setPhotos(value);
+      }
+    }, [value]);
+    const onChangeValue = (e) => {
+      const newPhotos = [
+        ...photos,
+        ...e.value.map((el) => ({
           url: URL.createObjectURL(el.file),
           id: el.id
-        };
-      })
-    ]);
-    onChange == null ? void 0 : onChange({ type: "add", data: e.value });
-  };
-  const onDelete = (j) => {
-    setPhotos(j.list);
-    if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: cls["upload-file__wrapper"], children: [
-    /* @__PURE__ */ jsx(
-      Uploader,
+        }))
+      ];
+      setPhotos(newPhotos);
+      onChange == null ? void 0 : onChange({ type: "add", data: e.value });
+    };
+    const onDelete = (j) => {
+      setPhotos(j.list);
+      if (j.deleteId) onChange == null ? void 0 : onChange({ type: "delete", data: j.deleteId });
+    };
+    return /* @__PURE__ */ jsxs(
+      "div",
       {
-        filesType,
-        arrayName,
-        maxSize,
-        onChangeValue
+        className: classNames(
+          cls["upload-file__wrapper"],
+          isMaxFilesReached && cls.disabled
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            Uploader,
+            {
+              filesType,
+              arrayName,
+              maxSize,
+              onChangeValue,
+              ref,
+              maxFiles,
+              isDisabled: isMaxFilesReached
+            }
+          ),
+          /* @__PURE__ */ jsx(ListPhotos, { value: photos, onChange: onDelete })
+        ]
       }
-    ),
-    /* @__PURE__ */ jsx(ListPhotos, { value: photos, onChange: onDelete })
-  ] });
-}
+    );
+  }
+);
 export {
   UploaderPhotos
 };

package/dist/components/index.d.ts

@@ -1,6 +1,8 @@
 export { Button, EButtonForm, EButtonSize, EButtonVariantDefault, EButtonVariantRound, EButtonVariantOutline, type TButtonProps } from './Button';
 export { Input, EInputSize, EInputVariant } from './Input';
 export type { TInputProps, TSize, TVariant } from './Input';
+export { TextArea } from './TextArea';
+export type { TTextAreaProps } from './TextArea';
 export { InputPassword } from './InputPassword';
 export type { TInputPasswordProps } from './InputPassword';
 export { InputPhoneNumber, getMaskedInputPhoneValue, getUnmaskedInputValue } from './InputPhoneNumber';
@@ -20,9 +22,7 @@ export { EDrawerPosition } from './Drawer';
 export { Steps, EStepsPrimaryColor, EStepsSecondaryColor, EStepsSize, type TCommonStepsProps } from './Steps';
 export { Vote, EVoteSize, type TCommonVoteProps } from './Vote';
 export { SelectSearch, ESelectSearchSize } from './SelectSearch';
-export type { TSelectSearchProps } from './SelectSearch';
-export { SelectSearchOption } from './SelectSearchOption';
-export type { SelectSearchOptionProps } from './SelectSearchOption';
+export type { TSelectSearchProps, TSelectOption } from './SelectSearch';
 export { Switch } from './Switch';
 export type { TSwitchProps } from './Switch';
 export { Tag, ETagSize, ETagType } from './Tag';