@moysklad/uikit 28.1.0 → 31.20.0

package/dist/components/EditableDate/EditableDate.d.ts

@@ -0,0 +1,9 @@
+import { type DatepickerProps } from '../Datepicker/Datepicker';
+export declare const omitedDatepickerProps: ("error" | "label" | "inline" | "required" | "placeholder" | "helperText" | "frameless" | "setInitialDateIntoInput" | "blurAfterChange" | "blurAfterPick" | "showTime" | "isTimeRequired" | "blurInputOnEsc" | "blurInputOnEnter" | "fitInput" | "nullableValueWhenTimeIncomplete" | "customRender" | "onTimeToggleChange")[];
+type OmitedDatepickerProps = Omit<DatepickerProps, (typeof omitedDatepickerProps)[number]>;
+export interface EditableDateProps extends OmitedDatepickerProps {
+    prefix?: string;
+    selectedDate: Date | string;
+}
+export declare const EditableDate: ({ prefix, selectedDate, localeFormat, dateTimeFormatOptions, disabled, iconPosition, onDayClick, ...props }: EditableDateProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/EditableDate/EditableDate.js

@@ -0,0 +1,142 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { format } from "date-fns";
+import { cn } from "../../common/css/index.js";
+import { mergeRefs } from "../../common/react/mergeRefs.js";
+import { Text } from "../Text/Text.js";
+import { Date16Icon } from "../../icon/index.js";
+import { Datepicker } from "../Datepicker/Datepicker.js";
+import { dateFormatter, parseSelectedDate } from "../Datepicker/utils/index.js";
+import { DROPDOWN_CLOSE_REASON, Dropdown, useDropdown } from "../Dropdown/Dropdown.js";
+import { DropdownContent } from "./DropdownContent/DropdownContent.js";
+import EditableDate_module from "./EditableDate.module.js";
+const omitedDatepickerProps = [
+    'isTimeRequired',
+    'required',
+    'label',
+    'helperText',
+    'error',
+    'inline',
+    'frameless',
+    'fitInput',
+    'customRender',
+    'onTimeToggleChange',
+    'blurInputOnEsc',
+    'blurInputOnEnter',
+    'setInitialDateIntoInput',
+    'nullableValueWhenTimeIncomplete',
+    'placeholder',
+    'showTime',
+    'blurAfterChange',
+    'blurAfterPick'
+];
+const EditableDate = ({ prefix = 'от', selectedDate, localeFormat, dateTimeFormatOptions, disabled, iconPosition = 'end', onDayClick, ...props })=>{
+    const buttonRef = useRef(null);
+    const inputRef = useRef(null);
+    const lastDropdownElementRef = useRef(null);
+    const dropdownContentRef = useRef(null);
+    const calendarDropdown = useDropdown();
+    const [stringValue, setStringValue] = useState(null);
+    const formatter = dateFormatter.getFormatter(localeFormat, dateTimeFormatOptions);
+    const parsedSelectedDate = useMemo(()=>'string' == typeof selectedDate ? parseSelectedDate(selectedDate, formatter) : selectedDate, [
+        selectedDate,
+        formatter
+    ]);
+    const dateToString = useCallback((date)=>format(date, formatter.dateTime.format), [
+        formatter.dateTime.format
+    ]);
+    const handleDayClick = (date)=>{
+        onDayClick?.(date);
+        calendarDropdown.handleClose();
+    };
+    const handleInputKeyDown = (event)=>{
+        props.onInputKeyDown?.(event);
+        if ('Enter' !== event.key) return;
+        calendarDropdown.handleClose?.();
+        buttonRef.current?.focus();
+    };
+    const handleButtonMouseDown = (event)=>{
+        if (calendarDropdown.open) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    useEffect(()=>{
+        const stringValue = parsedSelectedDate ? dateToString(parsedSelectedDate) : null;
+        setStringValue(stringValue);
+    }, [
+        dateToString,
+        parsedSelectedDate
+    ]);
+    return /*#__PURE__*/ jsx(Datepicker, {
+        ...props,
+        selectedDate: selectedDate,
+        localeFormat: localeFormat,
+        dateTimeFormatOptions: dateTimeFormatOptions,
+        showTime: true,
+        isTimeRequired: true,
+        inline: true,
+        frameless: true,
+        fitInput: true,
+        setInitialDateIntoInput: true,
+        nullableValueWhenTimeIncomplete: true,
+        iconPosition: iconPosition,
+        blurInputOnEsc: false,
+        blurInputOnEnter: false,
+        lastElementRef: lastDropdownElementRef,
+        inputRef: mergeRefs([
+            inputRef,
+            props.inputRef
+        ]),
+        onDayClick: handleDayClick,
+        onInputKeyDown: handleInputKeyDown,
+        customRender: ({ input, calendar })=>/*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsxs("button", {
+                        ref: buttonRef,
+                        className: cn(EditableDate_module.button, disabled && EditableDate_module.disabled),
+                        "data-test-id": props.testId,
+                        onClick: calendarDropdown.handleToggle,
+                        disabled: disabled,
+                        onMouseDown: handleButtonMouseDown,
+                        children: [
+                            /*#__PURE__*/ jsxs(Text.BodyXL, {
+                                className: EditableDate_module.title,
+                                children: [
+                                    prefix,
+                                    " ",
+                                    /*#__PURE__*/ jsx("span", {
+                                        ref: calendarDropdown.triggerRef
+                                    }),
+                                    stringValue
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: EditableDate_module.iconContainer,
+                                children: /*#__PURE__*/ jsx(Date16Icon, {})
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Dropdown, {
+                        open: calendarDropdown.open,
+                        onClose: (reason)=>{
+                            calendarDropdown.handleClose();
+                            if (reason === DROPDOWN_CLOSE_REASON.ESCAPE) buttonRef.current?.focus();
+                        },
+                        triggerRef: calendarDropdown.triggerRef,
+                        offsetY: -39,
+                        shouldIgnoreOutsideInteraction: (element)=>dropdownContentRef.current?.contains(element) ?? false,
+                        children: /*#__PURE__*/ jsx(DropdownContent, {
+                            ref: dropdownContentRef,
+                            testId: props.testId,
+                            calendar: calendar,
+                            input: input,
+                            inputRef: inputRef,
+                            lastDropdownElementRef: lastDropdownElementRef
+                        })
+                    })
+                ]
+            })
+    });
+};
+export { EditableDate, omitedDatepickerProps };

package/dist/components/EditableDate/EditableDate.module.js

@@ -0,0 +1,7 @@
+import "./EditableDate_module.css";
+const EditableDate_module = {
+    button: "button-URdOeG",
+    disabled: "disabled-wlENxh",
+    iconContainer: "iconContainer-EFdoq_"
+};
+export default EditableDate_module;

package/dist/components/EditableDate/EditableDate_module.css

@@ -0,0 +1,32 @@
+.button-URdOeG {
+  all: unset;
+  cursor: pointer;
+  align-items: center;
+  gap: 8px;
+  padding-top: 2px;
+  display: flex;
+}
+
+.button-URdOeG:hover, .button-URdOeG:active {
+  text-decoration: underline;
+}
+
+.disabled-wlENxh {
+  cursor: default;
+}
+
+.disabled-wlENxh:hover, .disabled-wlENxh:active {
+  text-decoration: none;
+}
+
+.button-URdOeG:focus-visible {
+  outline: 1px solid var(--border-focused, #091739);
+  outline-offset: -1px;
+}
+
+.iconContainer-EFdoq_ {
+  align-items: center;
+  padding-bottom: 2px;
+  display: flex;
+}
+

package/dist/components/EditableTitle/EditableTitle.d.ts

@@ -1,4 +1,4 @@
-import { type FC } from 'react';
+import React from 'react';
 import { type IHasTestId } from '../../common/types';
 declare const titleComponents: {
     readonly H2: import("../Text/utils/polymorphicTextRef").TextComponent<import("../Text/components/types").TextVariantProps, "h2">;
@@ -8,6 +8,7 @@ declare const titleComponents: {
 export interface EditableTitleProps extends IHasTestId {
     onApplyValidValue?: (value: string) => void;
     onChangeWithValidation?: (value: string) => string | undefined;
+    onToggle?: (isEdit: boolean) => void;
     className?: string;
     defaultValue?: string;
     titleComponent?: keyof typeof titleComponents;
@@ -16,6 +17,10 @@ export interface EditableTitleProps extends IHasTestId {
     maxWidth?: number;
     maxLength?: number;
     overflowTextAlert?: string;
+    prefix?: string;
+    titleClassName?: string;
+    inputWrapperClassName?: string;
+    hintZIndex?: number;
 }
-export declare const EditableTitle: FC<EditableTitleProps>;
+export declare const EditableTitle: React.MemoExoticComponent<React.ForwardRefExoticComponent<EditableTitleProps & React.RefAttributes<HTMLDivElement>>>;
 export {};

package/dist/components/EditableTitle/EditableTitle.js

@@ -1,13 +1,13 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { forwardRef, memo, useCallback, useEffect, useRef, useState } from "react";
 import { useLatestValue } from "@dnd-kit/utilities";
 import { cn } from "../../common/css/cn.js";
+import { HintWithSkip } from "../_shared/HintWithSkip/HintWithSkip.js";
 import { Button, ButtonVariants } from "../Button/Button.js";
 import { HintVariant, Placement } from "../Hint/Hint.js";
 import { Input } from "../Input/Input.js";
 import { Text, TextColor } from "../Text/Text.js";
 import { Check20Icon } from "../../icon/index.js";
-import { HintWithSkip } from "./HintWithSkip.js";
 import EditableTitle_module from "./EditableTitle.module.js";
 const MS_AMOUNT_OF_OVERFLOW_TEXT_ALERT_VISIBLE = 3000;
 const titleComponents = {
@@ -15,7 +15,7 @@ const titleComponents = {
     H3: Text.H3,
     BodyXL: Text.BodyXL
 };
-const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue, onChangeWithValidation, defaultValue, hintText, titleComponent = 'H2', withoutSaveButton = false, maxWidth, maxLength, overflowTextAlert })=>{
+const EditableTitle = /*#__PURE__*/ memo(/*#__PURE__*/ forwardRef(({ testId, className, onApplyValidValue, onChangeWithValidation, onToggle, defaultValue, hintText, titleComponent = 'H2', withoutSaveButton = false, maxWidth, maxLength, overflowTextAlert, prefix, titleClassName, inputWrapperClassName, hintZIndex }, ref)=>{
     const [isEdit, setIsEdit] = useState(!defaultValue);
     const [value, setValue] = useState((defaultValue ?? '').substring(0, maxLength));
     const [alertHintText, setAlertHintText] = useState('');
@@ -25,9 +25,17 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
     const timeoutIdRef = useRef();
     const isDirtyRef = useRef(false);
     const Title = titleComponents[titleComponent];
+    const changeEditMode = useCallback((isEdit)=>{
+        if (onToggle) onToggle(isEdit);
+        setIsEdit(isEdit);
+    }, [
+        onToggle
+    ]);
     const handleClickTitle = useCallback(()=>{
-        setIsEdit(true);
-    }, []);
+        changeEditMode(true);
+    }, [
+        changeEditMode
+    ]);
     const handleClearInput = useCallback(()=>{
         setValue('');
     }, []);
@@ -39,12 +47,13 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
         setAlertHintText(error);
         setIsError(!!error);
         if (error) return;
-        setIsEdit(!inputValue);
+        changeEditMode(!inputValue);
         onApplyValidValue?.(inputValue);
         isDirtyRef.current = false;
         timeoutIdRef.current = void 0;
         clearTimeout(timeoutIdRef.current);
     }, [
+        changeEditMode,
         latestValue,
         onApplyValidValue,
         onChangeWithValidation
@@ -101,7 +110,15 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
     useEffect(()=>()=>{
             clearTimeout(timeoutIdRef.current);
         }, []);
+    const trimmedPrefix = prefix?.trim();
+    const formattedPrefix = trimmedPrefix ? /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            trimmedPrefix,
+            "\xa0"
+        ]
+    }) : null;
     return /*#__PURE__*/ jsx("div", {
+        ref: ref,
         "data-test-id": testId,
         className: cn(EditableTitle_module.wrapper, className),
         style: {
@@ -109,28 +126,39 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
         },
         children: isEdit ? /*#__PURE__*/ jsxs(Fragment, {
             children: [
-                /*#__PURE__*/ jsx(HintWithSkip, {
-                    skip: !alertHintText,
-                    variant: HintVariant.Alert,
-                    placement: Placement.BOTTOM,
-                    visible: true,
-                    overlay: /*#__PURE__*/ jsx(Text.Body, {
-                        testId: testId ? `${testId}-alert-hint` : void 0,
-                        colorToken: TextColor.critical,
-                        children: alertHintText
-                    }),
-                    children: /*#__PURE__*/ jsx(Input, {
-                        testId: testId ? `${testId}-input` : void 0,
-                        ref: inputRefCb,
-                        name: "EditableTitleInput",
-                        clearable: true,
-                        onClear: handleClearInput,
-                        value: value,
-                        onChange: handleChangeInput,
-                        error: isError,
-                        autoComplete: "off",
-                        onBlur: handleBlurInput
-                    })
+                /*#__PURE__*/ jsxs("div", {
+                    className: cn(EditableTitle_module.inputWrapper, inputWrapperClassName),
+                    children: [
+                        formattedPrefix && /*#__PURE__*/ jsx(Title, {
+                            testId: testId ? `${testId}-prefix` : void 0,
+                            tabIndex: -1,
+                            children: formattedPrefix
+                        }),
+                        /*#__PURE__*/ jsx(HintWithSkip, {
+                            skip: !alertHintText,
+                            variant: HintVariant.Alert,
+                            placement: Placement.BOTTOM,
+                            visible: true,
+                            overlay: /*#__PURE__*/ jsx(Text.Body, {
+                                testId: testId ? `${testId}-alert-hint` : void 0,
+                                colorToken: TextColor.critical,
+                                children: alertHintText
+                            }),
+                            zIndex: hintZIndex,
+                            children: /*#__PURE__*/ jsx(Input, {
+                                testId: testId ? `${testId}-input` : void 0,
+                                ref: inputRefCb,
+                                name: "EditableTitleInput",
+                                clearable: true,
+                                onClear: handleClearInput,
+                                value: value,
+                                onChange: handleChangeInput,
+                                error: isError,
+                                autoComplete: "off",
+                                onBlur: handleBlurInput
+                            })
+                        })
+                    ]
                 }),
                 !withoutSaveButton && /*#__PURE__*/ jsx(Button, {
                     testId: testId ? `${testId}-button` : void 0,
@@ -149,16 +177,20 @@ const EditableTitle = /*#__PURE__*/ memo(({ testId, className, onApplyValidValue
                 colorToken: TextColor.invert,
                 children: hintText
             }),
-            children: /*#__PURE__*/ jsx(Title, {
+            zIndex: hintZIndex,
+            children: /*#__PURE__*/ jsxs(Title, {
                 testId: testId ? `${testId}-title` : void 0,
-                className: EditableTitle_module.title,
+                className: cn(EditableTitle_module.title, titleClassName),
                 onClick: handleClickTitle,
                 tabIndex: 0,
                 onKeyDown: handleEnterDownOnTitle,
-                children: value
+                children: [
+                    formattedPrefix,
+                    value
+                ]
             })
         })
     });
-});
+}));
 EditableTitle.displayName = 'EditableTitle';
 export { EditableTitle };

package/dist/components/EditableTitle/EditableTitle.module.js

@@ -1,6 +1,7 @@
 import "./EditableTitle_module.css";
 const EditableTitle_module = {
     wrapper: "wrapper-Tgv288",
+    inputWrapper: "inputWrapper-S8Rm8A",
     title: "title-MJedXO"
 };
 export default EditableTitle_module;

package/dist/components/EditableTitle/EditableTitle_module.css

@@ -5,6 +5,12 @@
   display: flex;
 }
 
+.inputWrapper-S8Rm8A {
+  align-items: center;
+  width: 100%;
+  display: flex;
+}
+
 .title-MJedXO {
   cursor: pointer;
   text-overflow: ellipsis;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -30,5 +30,5 @@ export declare namespace EmptyState {
     var displayName: string;
     var Actions: ({ className, leftButtonSlot, centralButtonSlot, rightButtonSlot, ...restProps }: import("./Actions/Actions").ActionsProps) => import("react/jsx-runtime").JSX.Element | null;
     var Image: typeof import("../_shared/Image/Image").Image;
-    var Button: import("react").ForwardRefExoticComponent<import("../Button/Button").IButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+    var Button: import("../_shared/utils/polymorphicClickableTypes").ClickableComponent<import("../Button/Button").ButtonOwnProps, "button">;
 }

package/dist/components/EmptyStateLarge/EmptyStateLarge_module.css

@@ -1,7 +1,7 @@
 .container-antwWA {
   align-items: center;
-  gap: 32px;
-  width: 1200px;
+  gap: 16px;
+  width: 1088px;
   display: flex;
 }
 

package/dist/components/FileUploader/FileUploader.helpers.d.ts

@@ -56,6 +56,7 @@ export declare const mapRegistryItemToFile: (item: IRegistryItem) => IFile;
 export declare const mergeFilesWithLimits: (prevFiles: IFile[], incomingFiles: IFile[], limits?: Limits) => IFile[];
 export declare const getFileExtFromName: (fileName: string) => string;
 export declare const isImage: (file: IFile) => boolean;
+export declare const isImageByExt: (extension: string) => boolean;
 export declare const buildDisplayItems: (stateItems: DisplayStateItems) => IRenderItem[];
 export declare const isDndSortableItem: (item: {
     originIndex: number | null;

package/dist/components/FileUploader/FileUploader.helpers.js

@@ -104,6 +104,9 @@ const IMG_EXTENSIONS = [
 ];
 const isImage = (file)=>{
     const extension = getFileExtFromName(file.name);
+    return isImageByExt(extension);
+};
+const isImageByExt = (extension)=>{
     for(let i = 0; i < IMG_EXTENSIONS.length; i++){
         const mime = IMG_EXTENSIONS[i];
         if (mime === extension.toLowerCase()) return true;
@@ -252,4 +255,4 @@ const resolveNextScrollPosition = ({ container, direction })=>{
     if (nextScrollPosition > maxScrollLeft) return maxScrollLeft;
     return nextScrollPosition;
 };
-export { buildDisplayItems, buildLoadingStateItems, buildReadyStateItems, cloneFileWithMeta, finalizeResolvedFileState, getFileExtFromName, isDndSortableItem, isImage, makeFile, mapRegistryItemToFile, mergeFilesWithLimits, reorderFilesByDnd, resolveAutoScrollDirection, resolveFileCandidates, resolveNextScrollPosition };
+export { buildDisplayItems, buildLoadingStateItems, buildReadyStateItems, cloneFileWithMeta, finalizeResolvedFileState, getFileExtFromName, isDndSortableItem, isImage, isImageByExt, makeFile, mapRegistryItemToFile, mergeFilesWithLimits, reorderFilesByDnd, resolveAutoScrollDirection, resolveFileCandidates, resolveNextScrollPosition };

package/dist/components/FileUploader/FileUploader.js

@@ -11,7 +11,7 @@ import { usePreviewFlow } from "./hooks/usePreviewFlow/usePreviewFlow.js";
 import { useAutoScrollToInvalidFiles } from "./hooks/useAutoScrollToInvalidFiles/useAutoScrollToInvalidFiles.js";
 import { useDisplayItems } from "./hooks/useDisplayItems/useDisplayItems.js";
 import { useFileUploaderDndState } from "./hooks/useFileUploaderDndState/useFileUploaderDndState.js";
-const FileUploader = ({ files, invalidFiles, testId, className, disableDelete = false, hintZIndex, loadingCount = 0, loadingFiles, showAdditionalText = false, hideFileNames = false, onDelete, onDeleteFile, onDownload, enableDndSorting = false, onReorder })=>{
+const FileUploader = ({ files, invalidFiles, testId, className, disableDelete = false, hintZIndex, loadingCount = 0, loadingFiles, loadingText, showAdditionalText = false, hideFileNames = false, onDelete, onDeleteFile, onDownload, enableDndSorting = false, onReorder })=>{
     const fileUploaderTestIds = testId ? makeFileUploaderTestIds(testId) : null;
     const { imgSrc, handlePreviewOpen, handlePreviewClose, getPreviewInteractionProps } = usePreviewFlow();
     const { displayItems } = useDisplayItems({
@@ -71,6 +71,7 @@ const FileUploader = ({ files, invalidFiles, testId, className, disableDelete =
             onDownload: onDownload,
             hintZIndex: hintZIndex,
             isLoading: file.isLoading,
+            loadingText: loadingText,
             showAdditionalText: showAdditionalText,
             hideFileNames: hideFileNames,
             disableHints: disableHints,
@@ -116,6 +117,7 @@ const FileUploader = ({ files, invalidFiles, testId, className, disableDelete =
                             disableDelete: true,
                             hintZIndex: hintZIndex,
                             isLoading: dndState.activeDragItem.file.isLoading,
+                            loadingText: loadingText,
                             showAdditionalText: showAdditionalText,
                             hideFileNames: hideFileNames,
                             disableHints: true,

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

@@ -42,6 +42,7 @@ interface IFileUploaderBaseProps extends IHasTestId {
     disableDelete?: boolean;
     hintZIndex?: number;
     loadingCount?: number;
+    loadingText?: string;
     /**
      * @deprecated Используйте `onDeleteFile`, чтобы удалять конкретный экземпляр файла.
      */

package/dist/components/FileUploader/components/FileUploaderPreview/FileUploaderPreview.js

@@ -3,14 +3,14 @@ import { memo, useCallback } from "react";
 import { cn } from "../../../../common/css/cn.js";
 import { Spinner, SpinnerSize } from "../../../Spinner/Spinner.js";
 import { Text } from "../../../Text/Text.js";
-import { getFileExtFromName, isImage } from "../../FileUploader.helpers.js";
+import { getFileExtFromName, isImageByExt } from "../../FileUploader.helpers.js";
 import { makeFileUploaderPreviewTestIds } from "../../FileUploader.testIds.js";
 import { FileUploaderDeleteButton, FileUploaderFileIcon, FileUploaderFileName, FileUploaderOverlay } from "./components/index.js";
 import FileUploaderPreview_module from "./FileUploaderPreview.module.js";
 const FileUploaderPreview = /*#__PURE__*/ memo(({ file, testId, disableDelete = false, loadingText = 'загружаем...', hintZIndex, isLoading = false, showAdditionalText = false, hideFileNames = false, disableHints = false, disableOverlayActions = false, isDraggingPreview = false, isOverlayVisible = false, validationError, onMouseEnter, onMouseLeave, onFocusCapture, onBlurCapture, onPreview, onDelete, onDownload })=>{
     const previewTestIds = testId ? makeFileUploaderPreviewTestIds(testId) : null;
-    const extension = getFileExtFromName(file.name);
-    const isFileImage = isImage(file);
+    const clearFileExtension = getFileExtFromName(file.name.split('?')[0]);
+    const isFileImage = isImageByExt(clearFileExtension);
     const handleDelete = useCallback((e)=>{
         e.stopPropagation();
         onDelete?.();
@@ -37,7 +37,7 @@ const FileUploaderPreview = /*#__PURE__*/ memo(({ file, testId, disableDelete =
                 /*#__PURE__*/ jsx(Text.Caption, {
                     testId: previewTestIds?.extension,
                     className: FileUploaderPreview_module.fileType,
-                    children: extension.toLowerCase()
+                    children: clearFileExtension.toLowerCase()
                 })
             ]
         });

package/dist/components/Help/Help.d.ts

@@ -1,15 +1,22 @@
-import { type ReactNode } from 'react';
 import { type TooltipProps as RcTooltipProps } from 'rc-tooltip/es/Tooltip';
-import { type IHasTestId } from '../../common/types';
+import { type IHasTestId, type ValueOf } from '../../common/types';
 import { type TooltipProps } from '../Tooltip/Tooltip';
+export { Placement, type PlacementValue } from '../Tooltip/Tooltip';
+export declare const HelpSize: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export type HelpSizeValue = ValueOf<typeof HelpSize>;
 export interface HelpProps extends IHasTestId {
     popup: RcTooltipProps['overlay'];
+    size?: HelpSizeValue;
+    disabled?: boolean;
+    tabIndex?: number;
     className?: string;
     zIndex?: number;
     placement?: TooltipProps['placement'];
     onVisibleChange?: (v: boolean) => void;
-    icon?: ReactNode;
     offset?: TooltipProps['offset'];
 }
-export declare const Help: ({ testId, popup, className, zIndex, placement, onVisibleChange, icon, offset, }: HelpProps) => import("react/jsx-runtime").JSX.Element;
-export { Placement, type PlacementValue } from '../Tooltip/Tooltip';
+export declare const Help: ({ testId, popup, size, disabled, tabIndex, className, zIndex, placement, onVisibleChange, offset, }: HelpProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Help/Help.js

@@ -1,10 +1,20 @@
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { Support20Icon } from "../../icon/index.js";
+import { Support12Icon, Support16Icon, Support20Icon } from "../../icon/index.js";
 import { Placement, Tooltip } from "../Tooltip/Tooltip.js";
 import Help_module from "./Help.module.js";
-const Help = ({ testId, popup, className, zIndex, placement = Placement.RIGHT_TOP, onVisibleChange, icon, offset = [
+const HelpSize = {
+    S: 's',
+    M: 'm',
+    L: 'l'
+};
+const IconBySizeMap = {
+    [HelpSize.S]: Support12Icon,
+    [HelpSize.M]: Support16Icon,
+    [HelpSize.L]: Support20Icon
+};
+const Help = ({ testId, popup, size = HelpSize.L, disabled, tabIndex, className, zIndex, placement = Placement.RIGHT_TOP, onVisibleChange, offset = [
     0,
     0
 ] })=>{
@@ -15,19 +25,24 @@ const Help = ({ testId, popup, className, zIndex, placement = Placement.RIGHT_TO
     }, [
         onVisibleChange
     ]);
+    const Icon = IconBySizeMap[size];
     return /*#__PURE__*/ jsx(Tooltip, {
         testId: `${testId}-tooltip`,
         overlay: popup,
         visible: visible,
-        onVisibleChange: handleVisibleChange,
+        onVisibleChange: disabled ? void 0 : handleVisibleChange,
         placement: placement,
         offset: offset,
         zIndex: zIndex,
-        children: /*#__PURE__*/ jsx("span", {
+        children: /*#__PURE__*/ jsx("button", {
             "data-test-id": testId,
-            className: cn(className, Help_module.wrapper, visible && Help_module.visible),
-            children: icon ?? /*#__PURE__*/ jsx(Support20Icon, {})
+            "data-visible": visible,
+            type: "button",
+            disabled: disabled,
+            tabIndex: tabIndex,
+            className: cn(Help_module.button, Help_module[size], visible && Help_module.visible, disabled && Help_module.disabled, className),
+            children: /*#__PURE__*/ jsx(Icon, {})
         })
     });
 };
-export { Help, Placement };
+export { Help, HelpSize, Placement };

package/dist/components/Help/Help.module.js

@@ -1,6 +1,10 @@
 import "./Help_module.css";
 const Help_module = {
-    wrapper: "wrapper-pPctYQ",
-    visible: "visible-sdySeo"
+    button: "button-iueVAf",
+    visible: "visible-sdySeo",
+    disabled: "disabled-JKdTzW",
+    s: "s-bu2fTP",
+    m: "m-V5HJp8",
+    l: "l-soJwJm"
 };
 export default Help_module;