@astral/ui 4.73.1 → 4.75.0

package/node/components/DonutChart/useLogic/utils/getProgressPercent/getProgressPercent.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = void 0;
+/**
+ * Преобразует value/maxValue в целый процент 0–100.
+ * Дробная часть отбрасывается вниз, некорректные значения дают 0.
+ * @param value - Текущее значение
+ * @param maxValue - Максимальное значение (должно быть положительным и конечным)
+ * @returns Целый процент от 0 до 100
+ */
+const getProgressPercent = (value, maxValue) => {
+    if (!Number.isFinite(maxValue) || maxValue <= 0) {
+        return 0;
+    }
+    if (!Number.isFinite(value)) {
+        return 0;
+    }
+    return Math.max(0, Math.min(100, Math.floor((value / maxValue) * 100)));
+};
+exports.getProgressPercent = getProgressPercent;

package/node/components/DonutChart/useLogic/utils/getProgressPercent/index.d.ts

@@ -0,0 +1 @@
+export { getProgressPercent } from './getProgressPercent';

package/node/components/DonutChart/useLogic/utils/getProgressPercent/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = void 0;
+var getProgressPercent_1 = require("./getProgressPercent");
+Object.defineProperty(exports, "getProgressPercent", { enumerable: true, get: function () { return getProgressPercent_1.getProgressPercent; } });

package/node/components/DonutChart/useLogic/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { getMeterAriaValue } from './getMeterAriaValue';
+export { getDonutChartCssVars } from './getDonutChartCssVars';
+export { getGeometry } from './getGeometry';
+export { getProgressCirclePath } from './getProgressCirclePath';
+export { getProgressOffset } from './getProgressOffset';
+export { getProgressPercent } from './getProgressPercent';

package/node/components/DonutChart/useLogic/utils/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProgressPercent = exports.getProgressOffset = exports.getProgressCirclePath = exports.getGeometry = exports.getDonutChartCssVars = exports.getMeterAriaValue = void 0;
+var getMeterAriaValue_1 = require("./getMeterAriaValue");
+Object.defineProperty(exports, "getMeterAriaValue", { enumerable: true, get: function () { return getMeterAriaValue_1.getMeterAriaValue; } });
+var getDonutChartCssVars_1 = require("./getDonutChartCssVars");
+Object.defineProperty(exports, "getDonutChartCssVars", { enumerable: true, get: function () { return getDonutChartCssVars_1.getDonutChartCssVars; } });
+var getGeometry_1 = require("./getGeometry");
+Object.defineProperty(exports, "getGeometry", { enumerable: true, get: function () { return getGeometry_1.getGeometry; } });
+var getProgressCirclePath_1 = require("./getProgressCirclePath");
+Object.defineProperty(exports, "getProgressCirclePath", { enumerable: true, get: function () { return getProgressCirclePath_1.getProgressCirclePath; } });
+var getProgressOffset_1 = require("./getProgressOffset");
+Object.defineProperty(exports, "getProgressOffset", { enumerable: true, get: function () { return getProgressOffset_1.getProgressOffset; } });
+var getProgressPercent_1 = require("./getProgressPercent");
+Object.defineProperty(exports, "getProgressPercent", { enumerable: true, get: function () { return getProgressPercent_1.getProgressPercent; } });

package/node/components/ExpansionPanel/Summary/styles.d.ts

@@ -13,6 +13,6 @@ export declare const Title: import("@emotion/styled/dist/declarations/src/types"
 export declare const StyledChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/MenuOrganization/OrganizationButton/styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledButton: import("@emotion/styled/dist/declarations/src
 export declare const StyledChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("../..").WithoutEmotionSpecific<import("../..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const Container: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{

package/node/components/NewStepper/StepIcon/StepIcon.js

@@ -7,6 +7,7 @@ const StepErrorFillMd_1 = require("../../../icons/StepErrorFillMd");
 const StepSuccessFillMd_1 = require("../../../icons/StepSuccessFillMd");
 const cva_1 = require("../../utils/cva");
 const constants_1 = require("./constants");
+const useLogic_1 = require("./useLogic");
 const stepIcon = (0, cva_1.cva)(constants_1.stepIconClassnames.root, {
     variants: {
         isActive: {
@@ -24,10 +25,11 @@ const stepIcon = (0, cva_1.cva)(constants_1.stepIconClassnames.root, {
     },
 });
 const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    const { isShowError } = (0, useLogic_1.useLogic)({ isError, isActive, isCompleted });
     if (Icon) {
         return ((0, jsx_runtime_1.jsx)(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
     }
-    if (isError && !isActive) {
+    if (isShowError) {
         return (0, jsx_runtime_1.jsx)(StepErrorFillMd_1.StepErrorFillMd, { className: stepIcon({ isError: true }) });
     }
     if (isCompleted) {

package/node/components/NewStepper/StepIcon/useLogic/index.d.ts

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

package/node/components/NewStepper/StepIcon/useLogic/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./useLogic"), exports);

package/node/components/NewStepper/StepIcon/useLogic/useLogic.d.ts

@@ -0,0 +1,8 @@
+export type UseLogicParams = {
+    isActive?: boolean;
+    isCompleted?: boolean;
+    isError?: boolean;
+};
+export declare const useLogic: ({ isError, isActive, isCompleted, }: UseLogicParams) => {
+    isShowError: boolean | undefined;
+};

package/node/components/NewStepper/StepIcon/useLogic/useLogic.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLogic = void 0;
+const useLogic = ({ isError, isActive, isCompleted, }) => {
+    const isShowError = (isError && !isActive) || (isError && isCompleted && isActive);
+    return {
+        isShowError,
+    };
+};
+exports.useLogic = useLogic;

package/node/components/PageContent/PageContent.js

@@ -3,13 +3,31 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PageContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const PageContext_1 = require("../PageContext");
 const PageLayoutFooter_1 = require("../PageLayoutFooter");
 const classNames_1 = require("../utils/classNames");
+const cva_1 = require("../utils/cva");
 const constants_1 = require("./constants");
 const styles_1 = require("./styles");
-const useLogic_1 = require("./useLogic");
+const contentCva = (0, cva_1.cva)(constants_1.pageContentClassnames.content, {
+    variants: {
+        isUnconstrained: {
+            true: constants_1.pageContentClassnames.isUnconstrained,
+        },
+        hasHeader: {
+            true: constants_1.pageContentClassnames.contentHasHeader,
+        },
+        hasAside: {
+            true: constants_1.pageContentClassnames.hasAside,
+        },
+    },
+});
 exports.PageContent = (0, react_1.forwardRef)((props, forwardedRef) => {
-    const { hasAside, contentClassnames } = (0, useLogic_1.useLogic)(props);
-    const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
+    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
+    const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: (0, classNames_1.classNames)(className, constants_1.pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, (0, jsx_runtime_1.jsx)(styles_1.Content, { ref: scrollRef, className: contentCva({
+                    isUnconstrained,
+                    hasHeader: Boolean(header),
+                    hasAside,
+                }), children: children }), footer && !(0, react_1.isValidElement)(footer) && ((0, jsx_runtime_1.jsx)(PageLayoutFooter_1.PageLayoutFooter, { ...footer })), (0, react_1.isValidElement)(footer) && footer] }));
 });

package/node/components/PageContent/constants.d.ts

@@ -1,7 +1,9 @@
 export declare const pageContentClassnames: {
     pageContent: string;
     content: string;
+    isUnconstrained: string;
     contentHasHeader: string;
+    hasAside: string;
     animation: string;
     withPdfViewer: string;
 };

package/node/components/PageContent/constants.js

@@ -5,7 +5,9 @@ const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pageContentClassnames = {
     pageContent: (0, createUIKitClassname_1.createUIKitClassname)('page-content'),
     content: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content'),
+    isUnconstrained: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content_unconstrained'),
     contentHasHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content_has-header'),
+    hasAside: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content_has-aside'),
     animation: (0, createUIKitClassname_1.createUIKitClassname)('page-content_animation'),
     withPdfViewer: (0, createUIKitClassname_1.createUIKitClassname)('page-content_with-pdf-viewer'),
 };

package/node/components/PageContent/styles.d.ts

@@ -10,7 +10,5 @@ export declare const Wrapper: import("@emotion/styled/dist/declarations/src/type
 export declare const Content: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & {
-    $hasAside?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export {};

package/node/components/PageContent/styles.js

@@ -1,13 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Content = exports.Wrapper = void 0;
-const constants_1 = require("../CardGridInfinite/constants");
+const constants_1 = require("../constants");
 const PdfViewer_1 = require("../PdfViewer");
 const styled_1 = require("../styled");
 const constants_2 = require("./constants");
-const getPaddingContent = (theme, hasAside) => {
-    return hasAside ? theme.spacing(4, 6, 4) : theme.spacing(0, 6, 4);
-};
 exports.Wrapper = (0, styled_1.styled)('article', {
     shouldForwardProp: (prop) => !['$isFullHeight', '$isSeparatorShown'].includes(prop),
 }) `
@@ -63,7 +60,11 @@ exports.Content = styled_1.styled.div `
   overflow: auto;
   flex-grow: 1;
 
-  padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
+  padding: ${({ theme }) => theme.spacing(0, 6, 4)};
+
+  &.${constants_2.pageContentClassnames.contentHasHeader}, &.${constants_2.pageContentClassnames.hasAside} {
+    padding: ${({ theme }) => theme.spacing(4, 6, 4)};
+  }
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding-right: ${({ theme }) => theme.spacing(4)};
@@ -83,16 +84,21 @@ exports.Content = styled_1.styled.div `
     border: 1px solid ${({ theme }) => theme.palette.components.border.default};
     border-radius: ${({ theme }) => theme.shape.medium};
 
-    /* Причина игнора: Не критично для отображения */
-    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
-    &:has(.${constants_1.cardGridClassnames.root}) {
-      border: none;
-    }
-
     &.${constants_2.pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &.${constants_2.pageContentClassnames.isUnconstrained}, &:has(> .${constants_1.selfContainedClassname}) {
+      margin: 0;
+      padding: 0;
+
+      background-color: unset;
+      border: none;
+      border-radius: 0;
+    }
   }
 
   /* Причина игнора: Не критично для отображения */

package/node/components/PageContent/types.d.ts

@@ -30,4 +30,8 @@ export type PageContentProps = {
      * Header контентной части
      */
     header?: ReactNode;
+    /**
+     * Флаг, позволяющий контенту занимать всю доступную ширину контейнера
+     */
+    isUnconstrained?: boolean;
 };

package/node/components/Profile/styles.d.ts

@@ -21,7 +21,7 @@ export declare const Credentials: import("@emotion/styled/dist/declarations/src/
 export declare const StyledChevron: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     isActive?: boolean | undefined;
     className?: string | undefined;
-} & Omit<import("..").WithoutEmotionSpecific<import("@mui/material").SvgIconProps>, "classes" | "children" | "ref"> & {
+} & Omit<import("..").WithoutEmotionSpecific<import("..").SvgIconProps>, "classes" | "children" | "ref"> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const StyledAvatar: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {

package/node/components/SearchField/types.d.ts

@@ -12,4 +12,13 @@ export type SearchFieldProps = Omit<TextFieldProps, 'startAdornment' | 'endAdorn
      * Если true, будет отображаться лоадер в конце инпута
      */
     isLoading?: boolean;
+    /**
+     * Если true, вводимое пользователем значение будет применяться с debounce задержкой
+     */
+    isDebounced?: boolean;
+    /**
+     * Время, на которое будет откладываться вызов onChange при вводе символов в инпут
+     * @default 250
+     */
+    debounceDelay?: number;
 };

package/node/components/SearchField/useLogic/useLogic.d.ts

@@ -15,5 +15,5 @@ type UseLogicResult = {
     onBlur: (event: FocusEvent<HTMLInputElement>) => void;
     hideHelperText?: boolean;
 };
-export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, ...restProps }: SearchFieldProps) => UseLogicResult;
+export declare const useLogic: ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder, inputComponent, hideHelperText, isDebounced, debounceDelay, ...restProps }: SearchFieldProps) => UseLogicResult;
 export {};

package/node/components/SearchField/useLogic/useLogic.js

@@ -4,7 +4,9 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const useFirstMountState_1 = require("../../useFirstMountState");
 const useForwardedRef_1 = require("../../useForwardedRef");
-const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
+const debounce_1 = require("../../utils/debounce");
+const DEFAULT_DEBOUNCE_TIME = 250;
+const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, isDebounced, debounceDelay = DEFAULT_DEBOUNCE_TIME, ...restProps }) => {
     const inputRef = (0, useForwardedRef_1.useForwardedRef)(externalInputRef);
     const [internalValue, setInternalValue] = (0, react_1.useState)(defaultValue || value || '');
     const isFirstRender = (0, useFirstMountState_1.useFirstMountState)();
@@ -16,13 +18,29 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
             setInternalValue('');
         }
     }, [value]);
+    const createChangeEvent = (0, react_1.useCallback)((eventValue) => ({
+        target: {
+            value: eventValue,
+        },
+    }), []);
+    const debouncedOnChange = (0, react_1.useMemo)(() => isDebounced
+        ? (0, debounce_1.debounce)((targetValue) => propsOnChange?.(createChangeEvent(targetValue)), {
+            waitMs: debounceDelay,
+        }).call
+        : () => undefined, [createChangeEvent, propsOnChange, isDebounced]);
     const onChange = (event) => {
-        const trimmedEvent = {
-            ...event,
-            target: { ...event.target, value: event.target.value.trim() },
-        };
-        propsOnChange?.(trimmedEvent);
-        setInternalValue(event.target.value);
+        const originalValue = event.target.value;
+        setInternalValue(originalValue);
+        if (!propsOnChange) {
+            return;
+        }
+        const trimmedValue = originalValue.trim();
+        return isDebounced
+            ? debouncedOnChange(trimmedValue)
+            : propsOnChange({
+                ...event,
+                target: { ...event.target, value: trimmedValue },
+            });
     };
     const onBlur = (event) => {
         propsOnBlur?.(event);
@@ -30,15 +48,9 @@ const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: exte
             setInternalValue(value);
         }
     };
-    const createChangeEvent = (eventValue) => {
-        return {
-            target: {
-                value: eventValue,
-            },
-        };
-    };
     const onClearValue = () => {
-        onChange?.(createChangeEvent(''));
+        setInternalValue('');
+        propsOnChange?.(createChangeEvent(''));
         inputRef.current.value = '';
         inputRef.current?.focus();
     };

package/node/components/constants/classnames.d.ts

@@ -0,0 +1 @@
+export declare const selfContainedClassname: string;

package/node/components/constants/classnames.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.selfContainedClassname = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.selfContainedClassname = (0, createUIKitClassname_1.createUIKitClassname)('self-contained');

package/node/components/constants/index.d.ts

@@ -1,3 +1,4 @@
 export * from './date';
 export * from './scrollbar';
 export * from './footer';
+export * from './classnames';

package/node/components/constants/index.js

@@ -17,3 +17,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./date"), exports);
 __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./footer"), exports);
+__exportStar(require("./classnames"), exports);

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/HintPlaceholder.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { type UseLogicParams } from './useLogic';
 export type HintPlaceholderProps = UseLogicParams;
-export declare const HintPlaceholder: (props: HintPlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const HintPlaceholder: (props: HintPlaceholderProps) => number | bigint | true | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined>;

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/HintPlaceholder.js

@@ -10,7 +10,10 @@ const useLogic_1 = require("./useLogic");
 const HintPlaceholder = (props) => {
     const { extensions, className, isMultiple, maxFileCount, maxFileSize, placeholder, } = (0, useLogic_1.useLogic)(props);
     if (placeholder) {
-        return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: placeholder }));
+        if (typeof placeholder === 'string') {
+            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: placeholder }));
+        }
+        return placeholder;
     }
     if (isMultiple) {
         return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B\u044B. \u041D\u0435 \u0431\u043E\u043B\u0435\u0435 ", maxFileCount, ' ', (0, declensionFile_1.declensionFile)(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));

package/node/components/fileUploading/FileUploaderDropzone/HintPlaceholder/useLogic/useLogic.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 export type UseLogicParams = {
     /**
      * Флаг доступности множественной загрузки файлов
@@ -16,9 +17,9 @@ export type UseLogicParams = {
      */
     maxFileSize: number;
     /**
-     * Вспомогательный текст
+     * Вспомогательный текст или контент
      */
-    placeholder?: string;
+    placeholder?: ReactNode;
     className?: string;
 };
 export declare const useLogic: ({ accept, ...restProps }: UseLogicParams) => {
@@ -35,9 +36,9 @@ export declare const useLogic: ({ accept, ...restProps }: UseLogicParams) => {
      */
     maxFileSize: number;
     /**
-     * Вспомогательный текст
+     * Вспомогательный текст или контент
      */
-    placeholder?: string | undefined;
+    placeholder?: ReactNode;
     className?: string | undefined;
     extensions: string;
 };

package/node/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/HintPlaceholder.js

@@ -8,6 +8,15 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const HintPlaceholder = (props) => {
     const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(RenderImage, { ...imageProps, alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" }), (0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. \u0420\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] })) })] }));
+    const renderPlaceholder = () => {
+        if (!placeholder) {
+            return ((0, jsx_runtime_1.jsxs)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: ["\u041F\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u0442\u0435 \u0438\u043B\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u0438\u0442\u0435 \u0444\u0430\u0439\u043B. \u0420\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', (0, formatFileSizeToView_1.formatFileSizeToView)(maxFileSize), extensions && ' в формате ', (0, jsx_runtime_1.jsx)(styles_1.Extensions, { children: extensions })] }));
+        }
+        if (typeof placeholder === 'string') {
+            return ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder }));
+        }
+        return placeholder;
+    };
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { className: className, children: [(0, jsx_runtime_1.jsx)(RenderImage, { ...imageProps, alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" }), renderPlaceholder()] }));
 };
 exports.HintPlaceholder = HintPlaceholder;

package/node/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/useLogic/useLogic.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { type ReactNode } from 'react';
 export type UseLogicParams = {
     /**
      * Массив разрешенных расширений
@@ -9,9 +9,9 @@ export type UseLogicParams = {
      */
     maxFileSize: number;
     /**
-     * Вспомогательный текст
+     * Вспомогательный текст или контент
      */
-    placeholder?: string;
+    placeholder?: ReactNode;
     /**
      * Кастомное изображение для placeholder. Дефолтное берется из configProvider, если было прокинуто
      */
@@ -24,9 +24,9 @@ export declare const useLogic: ({ accept, placeholderImgSrc, ...rest }: UseLogic
      */
     maxFileSize: number;
     /**
-     * Вспомогательный текст
+     * Вспомогательный текст или контент
      */
-    placeholder?: string | undefined;
+    placeholder?: ReactNode;
     className?: string | undefined;
     RenderImage: import("@emotion/styled").StyledComponent<{
         theme?: import("@emotion/react").Theme | undefined;

package/node/components/fileUploading/hooks/useFileUploader/useFileUploader.d.ts

@@ -12,7 +12,7 @@ export declare const useFileUploader: ({ value, isDisabled, isMultiple, accept,
             accept: string[];
             maxFileCount: number;
             maxFileSize: number;
-            placeholder: string | undefined;
+            placeholder: import("react").ReactNode;
         };
         fileInputProps: {
             id: string | undefined;

package/node/components/fileUploading/hooks/usePreviewFileUploader/usePreviewFileUploader.d.ts

@@ -53,7 +53,7 @@ export declare const usePreviewFileUploader: ({ placeholderImgSrc, isHidePersona
             accept: string[];
             maxFileCount: number;
             maxFileSize: number;
-            placeholder: string | undefined;
+            placeholder: import("react").ReactNode;
         };
         isLimitMaxFileCount: boolean;
         maxFileCount: number;

package/node/components/fileUploading/types.d.ts

@@ -160,9 +160,9 @@ type BaseFileUploaderProps = {
      */
     restrictions?: RestrictionFn[];
     /**
-     * Вспомогательный текст
+     * Вспомогательный текст или контент
      */
-    placeholder?: string;
+    placeholder?: ReactNode;
     /**
      * Реф для доступа к input элементу
      */

package/node/components/useProfiler/index.d.ts

@@ -0,0 +1 @@
+export { useProfiler } from './useProfiler';

package/node/components/useProfiler/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProfiler = void 0;
+var useProfiler_1 = require("./useProfiler");
+Object.defineProperty(exports, "useProfiler", { enumerable: true, get: function () { return useProfiler_1.useProfiler; } });

package/node/components/useProfiler/useProfiler.d.ts

@@ -0,0 +1,14 @@
+type UseProfilerParams = {
+    componentName: string;
+    props: Record<string, unknown>;
+    id?: string;
+};
+/**
+ * Хук для отладки ререндеров компонентов.
+ * Логирует номер рендера, изменившиеся props и предупреждает,
+ * если ссылка на объект изменилась при неизменном содержимом.
+ *
+ * Только для внутреннего использования в uikit, не является публичным API.
+ */
+export declare const useProfiler: ({ componentName, props, id, }: UseProfilerParams) => void;
+export {};

package/node/components/useProfiler/useProfiler.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useProfiler = void 0;
+/** biome-ignore-all lint/suspicious/noConsole: сообщения для отладки */
+const react_1 = require("react");
+const utils_1 = require("./utils");
+/**
+ * Хук для отладки ререндеров компонентов.
+ * Логирует номер рендера, изменившиеся props и предупреждает,
+ * если ссылка на объект изменилась при неизменном содержимом.
+ *
+ * Только для внутреннего использования в uikit, не является публичным API.
+ */
+const useProfiler = ({ componentName, props, id, }) => {
+    const renderCountRef = (0, react_1.useRef)(0);
+    const prevPropsRef = (0, react_1.useRef)(props);
+    renderCountRef.current += 1;
+    const prevProps = prevPropsRef.current;
+    const entityId = id ? ` [id:${id}]` : '';
+    const changedProps = {};
+    Object.keys(props).forEach((key) => {
+        const prevValue = prevProps[key];
+        const currentValue = props[key];
+        if (!Object.is(prevValue, currentValue)) {
+            const isContentEqual = (0, utils_1.isObject)(currentValue) && (0, utils_1.shallowEqual)(prevValue, currentValue);
+            changedProps[key] = {
+                from: prevValue,
+                to: currentValue,
+                isLinkChangedButContentEqual: isContentEqual,
+            };
+        }
+    });
+    (0, react_1.useEffect)(() => {
+        console.group(`🔍 [${componentName}${entityId}] Рендер #${renderCountRef.current}`);
+        if (Object.keys(changedProps).length > 0) {
+            console.log('Изменились параметры компонента:', changedProps);
+            Object.keys(changedProps).forEach((key) => {
+                if (changedProps[key].isLinkChangedButContentEqual) {
+                    console.warn(`Параметр "${key}" изменил ссылку, хотя данные внутри остались прежними`);
+                }
+            });
+        }
+        else {
+            console.log('Изменений не произошло, но происходит ререндер');
+        }
+        console.groupEnd();
+    });
+    prevPropsRef.current = props;
+};
+exports.useProfiler = useProfiler;

package/node/components/useProfiler/utils/index.d.ts

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