@moysklad/uikit 28.1.0 → 30.4.0

package/dist/components/Chip/components/ChipLabel.js

@@ -4,19 +4,21 @@ import { cn } from "../../../common/index.js";
 import { Hint } from "../../Hint/Hint.js";
 import { Text, TextColor, TextVariant } from "../../Text/Text.js";
 import Chip_module from "../Chip.module.js";
-const ChipLabel = ({ label, isCompact, textBehavior, hintZIndex })=>{
+const ChipLabel = ({ label, colorToken, isCompact, textBehavior, hintZIndex })=>{
     const labelParagraphRef = useRef(null);
     const [isTruncated, setIsTruncated] = useState(false);
+    const maxWidthPx = textBehavior.constrainWidth ? textBehavior.maxWidthPx : void 0;
     useLayoutEffect(()=>{
         if (!labelParagraphRef.current) return void setIsTruncated(false);
         setIsTruncated(labelParagraphRef.current.scrollWidth > labelParagraphRef.current.clientWidth);
     }, [
         label,
-        textBehavior.constrainWidth ? textBehavior.maxWidthPx : void 0
+        maxWidthPx
     ]);
     const text = /*#__PURE__*/ jsx(Text, {
         variant: isCompact ? TextVariant.caption : TextVariant.body,
         ref: labelParagraphRef,
+        colorToken: colorToken,
         className: cn(Chip_module.label, Chip_module.ellipsis),
         children: label
     });

package/dist/components/Chip/components/ChipMainButton.d.ts

@@ -1,11 +1,10 @@
 import { type CSSProperties, type MouseEvent, type ReactNode } from 'react';
-type ChipMainButtonProps = {
+import type { IHasTabIndex } from '../../../common/types';
+export declare const ChipMainButton: import("react").ForwardRefExoticComponent<IHasTabIndex & {
     testId?: string;
     className?: string;
     disabled: boolean;
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     style?: CSSProperties;
     children: ReactNode;
-};
-export declare const ChipMainButton: import("react").ForwardRefExoticComponent<ChipMainButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
-export {};
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/Chip/components/ChipMainButton.js

@@ -1,12 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-const ChipMainButton = /*#__PURE__*/ forwardRef(({ testId, className, disabled, onClick, style, children }, ref)=>/*#__PURE__*/ jsx("button", {
+const ChipMainButton = /*#__PURE__*/ forwardRef(({ testId, className, disabled, onClick, style, tabIndex, children }, ref)=>/*#__PURE__*/ jsx("button", {
         "data-test-id": testId,
         ref: ref,
         onClick: onClick,
         className: className,
         disabled: disabled,
         style: style,
+        tabIndex: tabIndex,
         type: "button",
         children: children
     }));

package/dist/components/Chip/components/ChipRoot.d.ts

@@ -1,11 +1,12 @@
 import type { CSSProperties, ForwardedRef, MouseEvent, ReactNode } from 'react';
+import type { IHasTabIndex } from '../../../common/types';
 type ChipRootProps = {
     mode: 'group';
     testId?: string;
     className?: string;
     style?: CSSProperties;
     children: ReactNode;
-} | {
+} | (IHasTabIndex & {
     mode: 'single';
     testId?: string;
     className?: string;
@@ -14,6 +15,6 @@ type ChipRootProps = {
     onClick: (e: MouseEvent<HTMLButtonElement>) => void;
     buttonRef?: ForwardedRef<HTMLButtonElement>;
     children: ReactNode;
-};
+});
 export declare const ChipRoot: (props: ChipRootProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/Chip/components/ChipRoot.js

@@ -11,7 +11,7 @@ const ChipRoot = (props)=>{
             children: children
         });
     }
-    const { testId, className, style, disabled, onClick, buttonRef, children } = props;
+    const { testId, className, style, disabled, onClick, buttonRef, tabIndex, children } = props;
     return /*#__PURE__*/ jsx(ChipMainButton, {
         testId: testId,
         ref: buttonRef,
@@ -19,6 +19,7 @@ const ChipRoot = (props)=>{
         className: className,
         disabled: disabled,
         style: style,
+        tabIndex: tabIndex,
         children: children
     });
 };

package/dist/components/Dropdown/Dropdown.d.ts

@@ -21,5 +21,7 @@ export interface DropdownProps extends IHasTestId, DivProps {
     offsetX?: number;
     isInnerScroll?: boolean;
     anchor?: DropdownAnchor;
+    shouldIgnoreOutsideInteraction?: (target: Node) => boolean;
+    maxHeight?: number;
 }
 export declare const Dropdown: import("react").ForwardRefExoticComponent<DropdownProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Dropdown/Dropdown.js

@@ -12,7 +12,7 @@ const DROPDOWN_CLOSE_REASON = {
     ESCAPE: 'escape',
     MANUAL: 'manual'
 };
-const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children, triggerRef, zIndex = 2, portalElement = document.body, className, style, offsetY = 0, offsetX = 0, testId, isInnerScroll = false, anchor, ...restProps }, ref)=>{
+const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children, triggerRef, zIndex = 2, portalElement = document.body, className, style, offsetY = 0, offsetX = 0, testId, isInnerScroll = false, anchor, shouldIgnoreOutsideInteraction, maxHeight, ...restProps }, ref)=>{
     const innerRef = useRef(null);
     usePosition({
         open,
@@ -22,7 +22,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         offsetY,
         offsetX,
         isInnerScroll,
-        anchor
+        anchor,
+        maxHeightValue: maxHeight
     });
     useDismissOnOutsideClick({
         enabled: open,
@@ -30,7 +31,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         onDismiss: ()=>onClose(DROPDOWN_CLOSE_REASON.OUTSIDE_CLICK),
         ignoreRefs: [
             triggerRef
-        ]
+        ],
+        shouldIgnoreTarget: shouldIgnoreOutsideInteraction
     });
     useDismissOnFocusOutside({
         enabled: open,
@@ -38,7 +40,8 @@ const Dropdown = /*#__PURE__*/ forwardRef(({ id, open = false, onClose, children
         onDismiss: ()=>onClose(DROPDOWN_CLOSE_REASON.FOCUS_OUTSIDE),
         ignoreRefs: [
             triggerRef
-        ]
+        ],
+        shouldIgnoreTarget: shouldIgnoreOutsideInteraction
     });
     useDismissOnEscape({
         enabled: open,

package/dist/components/Dropdown/hooks/usePosition.d.ts

@@ -8,5 +8,6 @@ export interface UsePositionOptions {
     offsetX?: number;
     isInnerScroll?: boolean;
     anchor?: 'bottom' | 'top';
+    maxHeightValue?: number;
 }
-export declare const usePosition: ({ open, ref, triggerRef, children, offsetY, offsetX, isInnerScroll, anchor, }: UsePositionOptions) => void;
+export declare const usePosition: ({ open, ref, triggerRef, children, offsetY, offsetX, isInnerScroll, anchor, maxHeightValue, }: UsePositionOptions) => void;

package/dist/components/Dropdown/hooks/usePosition.js

@@ -3,7 +3,7 @@ import { observeMove } from "../utils/observeMove.js";
 import { useFindScrollableParents } from "./useFindScrollableParents.js";
 const MAX_HEIGHT = 440;
 const MIN_HEIGHT = 100;
-const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0, isInnerScroll, anchor = 'bottom' })=>{
+const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0, isInnerScroll, anchor = 'bottom', maxHeightValue = MAX_HEIGHT })=>{
     const scrollableParents = useFindScrollableParents({
         open,
         triggerRef
@@ -36,13 +36,13 @@ const usePosition = ({ open, ref, triggerRef, children, offsetY = 0, offsetX = 0
         let isYOverflow = triggerRect.top + refRect.height > containerRect.bottom;
         if (!isYOverflow) {
             const maxHeightFromStyle = parseFloat(getComputedStyle(ref.current).maxHeight);
-            if (!Number.isNaN(maxHeightFromStyle) && maxHeightFromStyle < MAX_HEIGHT || refRect.height > distanceToBottomViewport) isYOverflow = true;
+            if (!Number.isNaN(maxHeightFromStyle) && maxHeightFromStyle < maxHeightValue || refRect.height > distanceToBottomViewport) isYOverflow = true;
         }
         let isCurrentTop = false;
         if (doNotChangePosition) isCurrentTop = refToTop.current;
         const toTop = doNotChangePosition ? isCurrentTop : isYOverflow && distanceToTopViewport > distanceToBottomViewport;
         refToTop.current = toTop;
-        let maxHeight = MAX_HEIGHT;
+        let maxHeight = maxHeightValue;
         if (toTop && distanceToTopViewport < maxHeight) maxHeight = distanceToTopViewport;
         else if (!toTop && distanceToBottomViewport < maxHeight) maxHeight = distanceToBottomViewport;
         if ((maxHeight <= 0 || ref.current.scrollHeight <= maxHeight) && !isInnerScroll) maxHeight = void 0;

package/dist/components/EditableTitle/EditableTitle.js

@@ -2,12 +2,12 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { 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 = {

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

@@ -0,0 +1 @@
+export declare const OPEN_BUTTONS: string[];

package/dist/components/FieldLabel/FieldLabel.constants.js

@@ -0,0 +1,5 @@
+const OPEN_BUTTONS = [
+    ' ',
+    'Enter'
+];
+export { OPEN_BUTTONS };

package/dist/components/FieldLabel/FieldLabel.d.ts

@@ -0,0 +1,17 @@
+import { type LabelHTMLAttributes } from 'react';
+import type { IHasTestId } from '../../common';
+import { type HelpProps, type HelpSizeValue } from '../Help/Help';
+import { type TextProps } from '../Text/Text';
+export interface FieldLabelProps extends IHasTestId, Pick<TextProps, 'colorToken' | 'variant'>, Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'className' | 'color'> {
+    label?: string;
+    required?: boolean;
+    helpProps?: Omit<HelpProps, 'testId'>;
+    helpSize?: HelpSizeValue;
+    className?: string;
+    helpButtonClassName?: string;
+    onOverflowChange?: (isOverflowing: boolean) => void;
+}
+export declare const FieldLabel: {
+    ({ label, required, variant, colorToken, helpProps, helpSize, className, helpButtonClassName, testId, onOverflowChange, ...restProps }: FieldLabelProps): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/dist/components/FieldLabel/FieldLabel.js

@@ -0,0 +1,76 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { cn } from "../../common/css/cn.js";
+import { getOptionalTestId } from "../../common/testId/index.js";
+import { HelpSize } from "../Help/Help.js";
+import { Hint } from "../Hint/Hint.js";
+import { Text, TextColor, TextTag, TextVariant } from "../Text/Text.js";
+import { TextAtom } from "../Text/Text.atom.js";
+import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
+import { HelpButton } from "./components/index.js";
+import FieldLabel_module from "./FieldLabel.module.js";
+const FieldLabel = ({ label, required, variant = TextVariant.body, colorToken = TextColor.primary, helpProps, helpSize = HelpSize.M, className, helpButtonClassName, testId, onOverflowChange, ...restProps })=>{
+    const { ref: labelRef, isOverflowing: isOverflowingLabel } = useIsElementOverflowing([
+        label
+    ]);
+    const [isHintVisible, setIsHintVisible] = useState(false);
+    useEffect(()=>{
+        onOverflowChange?.(isOverflowingLabel);
+    }, [
+        isOverflowingLabel,
+        onOverflowChange
+    ]);
+    const helpPopup = helpProps?.popup;
+    if (!label) return null;
+    return /*#__PURE__*/ jsxs("div", {
+        "data-test-id": getOptionalTestId(testId, 'label-container'),
+        className: cn(FieldLabel_module.container, className),
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: FieldLabel_module.textWithRequiredMark,
+                children: [
+                    /*#__PURE__*/ jsx(Hint, {
+                        visible: isHintVisible,
+                        onVisibleChange: setIsHintVisible,
+                        overlay: /*#__PURE__*/ jsx(Text.Body, {
+                            testId: getOptionalTestId(testId, 'label-hint-text'),
+                            colorToken: "invert",
+                            className: FieldLabel_module.hintText,
+                            children: label
+                        }),
+                        trigger: isOverflowingLabel ? 'hover' : [],
+                        overlayClassName: FieldLabel_module.hint,
+                        children: /*#__PURE__*/ jsx(Text, {
+                            ...restProps,
+                            as: restProps.htmlFor ? TextTag.label : TextTag.span,
+                            ref: labelRef,
+                            variant: variant,
+                            testId: getOptionalTestId(testId, 'label'),
+                            className: cn(FieldLabel_module.overflowText, FieldLabel_module.labelText),
+                            colorToken: colorToken,
+                            children: label
+                        })
+                    }),
+                    required && /*#__PURE__*/ jsx(TextAtom, {
+                        as: TextTag.span,
+                        variant: variant,
+                        testId: getOptionalTestId(testId, 'required-mark'),
+                        className: FieldLabel_module.requiredMark,
+                        children: "*"
+                    })
+                ]
+            }),
+            helpPopup ? /*#__PURE__*/ jsx(HelpButton, {
+                helpProps: {
+                    ...helpProps,
+                    popup: helpPopup,
+                    testId: getOptionalTestId(testId, 'help')
+                },
+                size: helpSize,
+                className: helpButtonClassName
+            }) : null
+        ]
+    });
+};
+FieldLabel.displayName = 'FieldLabel';
+export { FieldLabel };

package/dist/components/FieldLabel/FieldLabel.module.js

@@ -0,0 +1,11 @@
+import "./FieldLabel_module.css";
+const FieldLabel_module = {
+    container: "container-C1lItd",
+    textWithRequiredMark: "textWithRequiredMark-ETmaJz",
+    labelText: "labelText-EzqZFW",
+    requiredMark: "requiredMark-Mkh961",
+    overflowText: "overflowText-GKoGmM",
+    hint: "hint-omNam8",
+    hintText: "hintText-Kbfap2"
+};
+export default FieldLabel_module;

package/dist/components/FieldLabel/FieldLabel_module.css

@@ -0,0 +1,42 @@
+.container-C1lItd {
+  justify-content: flex-start;
+  align-items: center;
+  gap: 4px;
+  display: flex;
+}
+
+.textWithRequiredMark-ETmaJz {
+  align-items: center;
+  display: flex;
+  overflow: hidden;
+}
+
+.labelText-EzqZFW {
+  flex: 1;
+}
+
+.requiredMark-Mkh961 {
+  color: var(--elements-critical, #e50347);
+}
+
+.overflowText-GKoGmM {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.overflowText-GKoGmM:after {
+  content: "";
+  display: block;
+}
+
+.hint-omNam8 {
+  box-sizing: border-box;
+  overflow-wrap: break-word;
+  max-width: 300px;
+}
+
+.hintText-Kbfap2 {
+  overflow-wrap: break-word;
+}
+

package/dist/components/FieldLabel/components/HelpButton.d.ts

@@ -0,0 +1,8 @@
+import { type HelpProps, type HelpSizeValue } from '../../Help/Help';
+interface HelpButtonProps {
+    size: HelpSizeValue;
+    helpProps: HelpProps;
+    className?: string;
+}
+export declare const HelpButton: ({ size, helpProps, className }: HelpButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/FieldLabel/components/HelpButton.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../common/css/cn.js";
+import { Help } from "../../Help/Help.js";
+import HelpButton_module from "./HelpButton.module.js";
+const HelpButton = ({ size, helpProps, className })=>/*#__PURE__*/ jsx("div", {
+        className: cn(HelpButton_module.container, className),
+        onClick: (event)=>{
+            event.stopPropagation();
+        },
+        children: /*#__PURE__*/ jsx(Help, {
+            ...helpProps,
+            size: size
+        })
+    });
+export { HelpButton };

package/dist/components/FieldLabel/components/HelpButton.module.js

@@ -0,0 +1,5 @@
+import "./HelpButton_module.css";
+const HelpButton_module = {
+    container: "container-5gBKoj"
+};
+export default HelpButton_module;

package/dist/components/FieldLabel/components/HelpButton_module.css

@@ -0,0 +1,8 @@
+.container-5gBKoj {
+  -webkit-user-select: none;
+  user-select: none;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+}
+

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

@@ -0,0 +1 @@
+export * from './HelpButton';

package/dist/components/FieldLabel/components/index.js

@@ -0,0 +1 @@
+export * from "./HelpButton.js";

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;

package/dist/components/Help/Help_module.css

@@ -1,18 +1,46 @@
-.wrapper-pPctYQ {
+.button-iueVAf {
+  all: unset;
+  box-sizing: border-box;
   cursor: pointer;
-  height: min-content;
+  color: var(--elements-normal, #5f6d79);
+  justify-content: center;
+  align-items: center;
   display: flex;
 }
 
-.wrapper-pPctYQ svg path[stroke] {
-  stroke: var(--dark-grey-grey-800);
+.button-iueVAf:hover, .button-iueVAf:active {
+  color: var(--elements-hover, #091739);
 }
 
-.wrapper-pPctYQ:hover svg path[stroke] {
-  stroke: var(--dark-grey-dark-900);
+.button-iueVAf:focus-visible {
+  outline: 1px solid var(--border-focused, #091739);
+  outline-offset: 1px;
+  color: var(--elements-hover, #091739);
+  border-radius: 2px;
 }
 
-.visible-sdySeo svg path[stroke], .visible-sdySeo:hover svg path[stroke] {
-  stroke: var(--product-blue-700);
+.visible-sdySeo {
+  color: var(--elements-hover, #091739);
+}
+
+.disabled-JKdTzW {
+  color: var(--elements-disabled);
+  cursor: default;
+  pointer-events: none;
+}
+
+.s-bu2fTP {
+  width: 12px;
+  height: 12px;
+}
+
+.m-V5HJp8 {
+  width: 16px;
+  height: 16px;
+}
+
+.l-soJwJm {
+  width: 20px;
+  height: 20px;
 }