@moysklad/uikit 28.1.0 → 31.20.0

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-inactive, #9fa7af);
+  cursor: default;
+  pointer-events: none;
+}
+
+.s-bu2fTP {
+  width: 12px;
+  height: 12px;
+}
+
+.m-V5HJp8 {
+  width: 16px;
+  height: 16px;
+}
+
+.l-soJwJm {
+  width: 20px;
+  height: 20px;
 }
 

package/dist/components/Hint/Hint.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { cn } from "../../common/css/cn.js";
-import { ArrowIcon } from "../Tooltip/ArrowIcon.js";
+import { TooltipBodyColor } from "../Tooltip/constants/index.js";
 import { Placement, Tooltip } from "../Tooltip/Tooltip.js";
 import Hint_module from "./Hint.module.js";
 const HintVariant = {
@@ -28,13 +28,12 @@ const Hint = ({ testId = 'hint', children, placement = Placement.TOP, variant =
         },
         placement: placement,
         hideCloseButton: true,
-        overlayClassName: cn(Hint_module.overlay, variant === HintVariant.Alert ? Hint_module.alertOverlay : Hint_module.defaultOverlay, overlayClassName),
+        colorToken: TooltipBodyColor.dark,
+        overlayClassName: cn(Hint_module.overlay, variant === HintVariant.Alert && Hint_module.alertOverlay, overlayClassName),
+        arrowClassName: Hint_module.arrow,
         trigger: [
             'hover'
         ],
-        arrowContent: /*#__PURE__*/ jsx(ArrowIcon, {
-            className: Hint_module.arrow
-        }),
         offset: offset,
         ...otherProps,
         children: children

package/dist/components/Hint/Hint.module.js

@@ -1,8 +1,7 @@
 import "./Hint_module.css";
 const Hint_module = {
     overlay: "overlay-r3djAa",
-    defaultOverlay: "defaultOverlay-xUUlq1",
-    arrow: "arrow-h8Epuo",
-    alertOverlay: "alertOverlay-CnGnJX"
+    alertOverlay: "alertOverlay-CnGnJX",
+    arrow: "arrow-h8Epuo"
 };
 export default Hint_module;

package/dist/components/Hint/Hint_module.css

@@ -5,15 +5,6 @@
   padding: 8px;
 }
 
-.defaultOverlay-xUUlq1 {
-  background: var(--invert-background, #131d36f0);
-  color: var(--invert-text, #fff);
-}
-
-.defaultOverlay-xUUlq1 .arrow-h8Epuo {
-  fill: var(--invert-background, #131d36f0);
-}
-
 .alertOverlay-CnGnJX {
   background: var(--status-red-01-bg, #ffdcdc);
   color: var(--text-critical, #e50347);

package/dist/components/Informer/Informer.d.ts

@@ -0,0 +1,37 @@
+import { type JSX } from 'react';
+import { type IHasTestId, type ValueOf } from '../../common/types';
+export declare const InformerVariant: {
+    readonly blue: "blue";
+    readonly green: "green";
+    readonly red: "red";
+};
+export type InformerVariantValue = ValueOf<typeof InformerVariant>;
+export type RenderTitleParams = {
+    title?: string;
+    testId?: string;
+};
+/**
+ * Встроенный неинтерактивный информационный блок для контекста экрана или объекта
+ * (состояние, ограничение, пояснение логики). Без кнопок, ссылок и закрытия.
+ *
+ * По умолчанию `variant=blue`.
+ * Расширяется по ширине родителя.
+ *
+ * Ширину можно задать через родителя или через className.
+ *
+ * Текст должен быть кратким. В коде нет проверки длины; если сообщение занимает
+ * больше 4 строк, необходимо согласовать с дизайнером другой компонент.
+ *
+ * @param title - заголовок (опционально)
+ * @param description - основной текст
+ * @param variant - цветовой вариант отображения: blue (по умолчанию), green, red
+ * @param renderTitle - кастомный рендер заголовка. Можно передать в него пропу title, можно без title
+ */
+export interface InformerProps extends IHasTestId {
+    title?: string;
+    description: string;
+    className?: string;
+    variant?: InformerVariantValue;
+    renderTitle?: (params: RenderTitleParams) => JSX.Element;
+}
+export declare const Informer: import("react").ForwardRefExoticComponent<InformerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/Informer/Informer.js

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { cn } from "../../common/css/cn.js";
+import { Text } from "../Text/Text.js";
+import Informer_module from "./Informer.module.js";
+const InformerVariant = {
+    blue: 'blue',
+    green: 'green',
+    red: 'red'
+};
+const defaultRenderTitle = ({ title, testId })=>title && /*#__PURE__*/ jsx(Text.BodyStrong, {
+        className: Informer_module.title,
+        testId: testId,
+        children: title
+    });
+const Informer = /*#__PURE__*/ forwardRef(({ variant = InformerVariant.blue, testId, title, renderTitle: renderTitleProp, description, className }, ref)=>{
+    const renderTitle = renderTitleProp ?? defaultRenderTitle;
+    return /*#__PURE__*/ jsxs("div", {
+        ref: ref,
+        role: "status",
+        "data-test-id": testId,
+        className: cn(Informer_module.container, Informer_module[variant], className),
+        children: [
+            renderTitle({
+                title,
+                testId: testId ? `${testId}-title` : void 0
+            }),
+            /*#__PURE__*/ jsx(Text.Body, {
+                testId: testId ? `${testId}-description` : void 0,
+                children: description
+            })
+        ]
+    });
+});
+Informer.displayName = 'Informer';
+export { Informer, InformerVariant };

package/dist/components/Informer/Informer.module.js

@@ -0,0 +1,7 @@
+import "./Informer_module.css";
+const Informer_module = {
+    container: "container-c0TyOV",
+    green: "green-Ib8KMk",
+    red: "red-N9Z4qO"
+};
+export default Informer_module;

package/dist/components/Informer/Informer_module.css

@@ -0,0 +1,24 @@
+.container-c0TyOV {
+  --informer-bg-color: var(--elements-bg-pressed);
+  --informer-border-color: var(--elements-accent);
+  box-sizing: border-box;
+  background-color: var(--informer-bg-color);
+  border-left: 2px solid var(--informer-border-color);
+  border-radius: 4px;
+  flex-direction: column;
+  gap: 4px;
+  width: 100%;
+  padding: 8px 12px 12px;
+  display: flex;
+}
+
+.green-Ib8KMk {
+  --informer-bg-color: var(--badge-green-bgd);
+  --informer-border-color: var(--elements-positive);
+}
+
+.red-N9Z4qO {
+  --informer-bg-color: var(--badge-red-bgd);
+  --informer-border-color: var(--elements-critical);
+}
+

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

@@ -1,5 +1,6 @@
 import React, { type InputHTMLAttributes, type ReactNode } from 'react';
 import { type IHasTabIndex, type IHasTestId } from '../../common/types';
+import type { HelpProps } from '../Help/Help';
 export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, IHasTestId, IHasTabIndex {
     name: string;
     className?: string;
@@ -11,6 +12,15 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, IHasT
     disabled?: boolean;
     clearable?: boolean;
     onClear?: () => void;
+    textActionIcon?: ReactNode;
+    onTextActionClick?: () => void;
+    trailingActionIcon?: ReactNode;
+    onTrailingActionClick?: () => void;
+    helpProps?: Omit<HelpProps, 'testId'>;
+    /** @deprecated Используйте `helpProps` */
     helpComponent?: ReactNode;
+    inputSize?: 'M' | 'L';
+    showCounterLimit?: boolean;
+    isInfoEllipsis?: boolean;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Input/Input.js

@@ -2,37 +2,62 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useRef } from "react";
 import { cn } from "../../common/css/cn.js";
 import { createSyntheticEvent } from "../../common/react/createSyntheticEvent.js";
-import { FieldRow } from "../FieldRow/FieldRow.js";
-import { Text, TextColor } from "../Text/Text.js";
+import { FieldLabel } from "../_shared/FieldLabel/FieldLabel.js";
+import { FieldRow } from "../_shared/FieldRow/FieldRow.js";
+import { InfoSize } from "../_shared/Info/types/index.js";
+import { InputClear } from "../_shared/InputClear/InputClear.js";
+import { InfoBlock } from "./components/InfoBlock.js";
+import { TextVariant } from "../Text/Text.js";
 import { useId } from "../../hooks/useId/index.js";
 import { useIsElementOverflowing } from "../../hooks/useIsElementOverflowing/index.js";
-import { RemoveClose12Icon } from "../../icon/index.js";
 import Input_module from "./Input.module.js";
-const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClassName, label, info, required, error, disabled, clearable, onClear, onBlur, helpComponent, ...inputProps }, ref)=>{
-    const inputId = useId(inputProps.id);
+const getActionsPaddingClass = (size, showTextAction, showClear, showTrailing)=>{
+    const isLarge = 'L' === size;
+    if (showTextAction && showClear && showTrailing) return isLarge ? Input_module.actionsPaddingFullL : Input_module.actionsPaddingFullM;
+    if (showClear && showTrailing) return isLarge ? Input_module.actionsPaddingClearTrailL : Input_module.actionsPaddingClearTrailM;
+    if (showTextAction && showClear) return isLarge ? Input_module.actionsPaddingTwoL : Input_module.actionsPaddingTwoM;
+    if (showTextAction || showClear || showTrailing) return isLarge ? Input_module.actionsPaddingOneL : Input_module.actionsPaddingOneM;
+};
+const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClassName, label, info, required, error, disabled, clearable, onClear, textActionIcon, onTextActionClick, trailingActionIcon, onTrailingActionClick, onBlur, helpProps, helpComponent, inputSize = 'M', showCounterLimit, isInfoEllipsis, ...inputProps }, ref)=>{
+    const { maxLength, onChange, value, ...restInputProps } = inputProps;
+    const inputId = useId(restInputProps.id);
     const ignoreBlurRef = useRef(false);
+    const largeStyle = 'L' === inputSize && Input_module.large;
+    const inputValue = String(value ?? '');
+    const labelVariant = 'L' === inputSize ? TextVariant.bodyL : TextVariant.body;
+    const handleChange = (e)=>{
+        onChange?.(e);
+    };
     const handleClear = ()=>{
-        if (inputProps.onChange) {
+        if (onChange) {
             const nativeEvent = new Event('change');
             Object.defineProperty(nativeEvent, 'target', {
                 writable: false,
                 value: ''
             });
             const event = createSyntheticEvent(nativeEvent);
-            inputProps.onChange(event);
+            onChange(event);
         }
         onClear?.();
     };
-    const handleClearMouseDown = ()=>{
+    const handleActionMouseDown = ()=>{
         ignoreBlurRef.current = true;
     };
-    const { ref: labelRef, isOverflowing: isOverflowingLabel } = useIsElementOverflowing([
-        label
-    ]);
+    const handleActionKeyDown = (e)=>{
+        if ('Enter' === e.key || ' ' === e.key) ignoreBlurRef.current = true;
+    };
     const { ref: inputRef, isOverflowing: isOverflowingInput } = useIsElementOverflowing([
-        inputProps.value,
-        clearable
+        value,
+        clearable,
+        textActionIcon,
+        trailingActionIcon
     ], ref);
+    const showClear = Boolean(clearable && value && !disabled);
+    const showTextAction = Boolean(textActionIcon && !disabled);
+    const showTrailing = Boolean(trailingActionIcon && !disabled);
+    const showActions = showTextAction || showClear || showTrailing;
+    const actionsPaddingClass = getActionsPaddingClass(inputSize, showTextAction, showClear, showTrailing);
+    const paddingClass = actionsPaddingClass ?? ('L' === inputSize ? Input_module.inputPaddingL : Input_module.inputPaddingM);
     const handleBlur = (e)=>{
         if (ignoreBlurRef.current) {
             ignoreBlurRef.current = false;
@@ -43,23 +68,14 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
         "data-test-id": testId,
         className: cn(Input_module.wrapper, className),
         children: [
-            label && /*#__PURE__*/ jsx("label", {
-                className: Input_module.labelWrapper,
+            /*#__PURE__*/ jsx(FieldLabel, {
+                label: label,
+                required: required,
                 htmlFor: inputId,
-                children: /*#__PURE__*/ jsxs(Text.Body, {
-                    ref: labelRef,
-                    title: isOverflowingLabel ? label : void 0,
-                    className: Input_module.label,
-                    as: "label",
-                    htmlFor: inputId,
-                    children: [
-                        label,
-                        required && /*#__PURE__*/ jsx("span", {
-                            className: Input_module.required,
-                            children: "*"
-                        })
-                    ]
-                })
+                testId: testId,
+                className: Input_module.label,
+                helpProps: helpProps,
+                variant: labelVariant
             }),
             /*#__PURE__*/ jsx(FieldRow, {
                 helpComponent: helpComponent,
@@ -67,35 +83,75 @@ const Input = /*#__PURE__*/ forwardRef(({ testId, tabIndex, className, inputClas
                     className: cn(Input_module.inputWrapper),
                     children: [
                         /*#__PURE__*/ jsx("input", {
-                            ...inputProps,
-                            title: isOverflowingInput ? inputProps.value?.toString() : void 0,
+                            ...restInputProps,
+                            ...void 0 === value ? {} : {
+                                value
+                            },
+                            maxLength: maxLength,
+                            onChange: handleChange,
+                            title: isOverflowingInput ? inputValue : void 0,
                             tabIndex: tabIndex,
                             id: inputId,
                             ref: inputRef,
                             "data-test-id": testId ? `${testId}-input` : null,
                             type: "text",
-                            className: cn(Input_module.input, clearable && Input_module.clearable, error && Input_module.error, inputClassName),
+                            className: cn(Input_module.input, largeStyle, paddingClass, error && Input_module.error, inputClassName),
                             disabled: disabled,
                             onBlur: handleBlur,
                             ...error ? {
                                 'data-error': true
                             } : {}
                         }),
-                        clearable && inputProps.value && !disabled && /*#__PURE__*/ jsx("span", {
-                            "data-test-id": testId ? `${testId}-input-clear` : null,
-                            className: Input_module.clearIcon,
-                            onMouseDown: handleClearMouseDown,
-                            onClick: handleClear,
-                            children: /*#__PURE__*/ jsx(RemoveClose12Icon, {})
+                        showActions && /*#__PURE__*/ jsxs("div", {
+                            className: cn(Input_module.actions, largeStyle),
+                            children: [
+                                /*#__PURE__*/ jsxs("div", {
+                                    className: cn(Input_module.textActions, largeStyle),
+                                    children: [
+                                        showTextAction && /*#__PURE__*/ jsx("button", {
+                                            type: "button",
+                                            "data-test-id": testId ? `${testId}-text-action` : null,
+                                            className: Input_module.iconActionButton,
+                                            onMouseDown: handleActionMouseDown,
+                                            onKeyDown: handleActionKeyDown,
+                                            onClick: onTextActionClick,
+                                            children: textActionIcon
+                                        }),
+                                        showClear && /*#__PURE__*/ jsx(InputClear, {
+                                            testId: testId,
+                                            onClick: handleClear,
+                                            onMouseDown: handleActionMouseDown,
+                                            size: inputSize
+                                        })
+                                    ]
+                                }),
+                                showTrailing && /*#__PURE__*/ jsx("div", {
+                                    className: cn(Input_module.divider, largeStyle)
+                                }),
+                                showTrailing && /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    "data-test-id": testId ? `${testId}-trailing-action` : null,
+                                    className: Input_module.trailingActionButton,
+                                    onMouseDown: handleActionMouseDown,
+                                    onKeyDown: handleActionKeyDown,
+                                    onClick: onTrailingActionClick,
+                                    children: trailingActionIcon
+                                })
+                            ]
                         })
                     ]
                 })
             }),
-            info && /*#__PURE__*/ jsx(Text.Caption, {
-                className: Input_module.info,
-                colorToken: !disabled && error ? TextColor.critical : TextColor.secondary,
-                testId: testId ? `${testId}-info` : void 0,
-                children: info
+            /*#__PURE__*/ jsx(InfoBlock, {
+                info: info,
+                isInfoEllipsis: isInfoEllipsis,
+                testId: testId,
+                value: inputValue,
+                maxLength: maxLength,
+                disabled: disabled,
+                showCounterLimit: showCounterLimit,
+                error: error,
+                size: 'L' === inputSize ? InfoSize.L : InfoSize.M
             })
         ]
     });

package/dist/components/Input/Input.module.js

@@ -6,10 +6,26 @@ const Input_module = {
     required: "required-tL_0P7",
     inputWrapper: "inputWrapper-Z2MHzj",
     input: "input-abYkhJ",
-    clearable: "clearable-RaD0Fg",
+    large: "large-byNK0a",
     error: "error-LvRHQc",
-    clearIcon: "clearIcon-IsS0xJ",
+    actions: "actions-mGn9Sv",
+    iconActionButton: "iconActionButton-G0JpZw",
+    trailingActionButton: "trailingActionButton-anvK7V",
+    textActions: "textActions-wjiHob",
+    divider: "divider-MSupsj",
     label: "label-LenERt",
-    help: "help-i_fDqu"
+    help: "help-i_fDqu",
+    helpIcon: "helpIcon-MR3GpI",
+    infoBlock: "infoBlock-KVlxEN",
+    inputPaddingM: "inputPaddingM-vHiTSa",
+    inputPaddingL: "inputPaddingL-N8VHsb",
+    actionsPaddingOneM: "actionsPaddingOneM-ZKwigm",
+    actionsPaddingTwoM: "actionsPaddingTwoM-WD5Jt3",
+    actionsPaddingClearTrailM: "actionsPaddingClearTrailM-Lp4qkT",
+    actionsPaddingFullM: "actionsPaddingFullM-nwz6aQ",
+    actionsPaddingOneL: "actionsPaddingOneL-vxw7Bt",
+    actionsPaddingTwoL: "actionsPaddingTwoL-MIUbac",
+    actionsPaddingClearTrailL: "actionsPaddingClearTrailL-vQgKWL",
+    actionsPaddingFullL: "actionsPaddingFullL-b6pU4F"
 };
 export default Input_module;