@astral/ui 4.73.1 → 4.75.0

package/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/components/DonutChart/useLogic/utils/index.js

@@ -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/components/ExpansionPanel/Summary/styles.d.ts

@@ -13,6 +13,6 @@ export declare const Title: import("../../styled").StyledComponent<{
 export declare const StyledChevron: import("../../styled").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/components/MenuOrganization/OrganizationButton/styles.d.ts

@@ -12,7 +12,7 @@ export declare const StyledButton: import("../../styled/styled").StyledComponent
 export declare const StyledChevron: import("../../styled/styled").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("../../styled/styled").StyledComponent<{

package/components/NewStepper/StepIcon/StepIcon.js

@@ -4,6 +4,7 @@ import { StepErrorFillMd } from '../../../icons/StepErrorFillMd';
 import { StepSuccessFillMd } from '../../../icons/StepSuccessFillMd';
 import { cva } from '../../utils/cva';
 import { stepIconClassnames } from './constants';
+import { useLogic } from './useLogic';
 const stepIcon = cva(stepIconClassnames.root, {
     variants: {
         isActive: {
@@ -21,10 +22,11 @@ const stepIcon = cva(stepIconClassnames.root, {
     },
 });
 export const StepIcon = ({ icon: Icon, isActive, isCompleted, isError, isWarning, }) => {
+    const { isShowError } = useLogic({ isError, isActive, isCompleted });
     if (Icon) {
         return (_jsx(Icon, { isActive: isActive, isCompleted: isCompleted, isError: isError, isWarning: isWarning, className: stepIcon({ isActive, isCompleted, isError, isWarning }) }));
     }
-    if (isError && !isActive) {
+    if (isShowError) {
         return _jsx(StepErrorFillMd, { className: stepIcon({ isError: true }) });
     }
     if (isCompleted) {

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

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

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

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

package/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/components/NewStepper/StepIcon/useLogic/useLogic.js

@@ -0,0 +1,6 @@
+export const useLogic = ({ isError, isActive, isCompleted, }) => {
+    const isShowError = (isError && !isActive) || (isError && isCompleted && isActive);
+    return {
+        isShowError,
+    };
+};

package/components/PageContent/PageContent.js

@@ -1,12 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, isValidElement } from 'react';
+import { forwardRef, isValidElement, useContext } from 'react';
+import { PageContext } from '../PageContext';
 import { PageLayoutFooter, } from '../PageLayoutFooter';
 import { classNames } from '../utils/classNames';
+import { cva } from '../utils/cva';
 import { pageContentClassnames } from './constants';
 import { Content, Wrapper } from './styles';
-import { useLogic } from './useLogic';
+const contentCva = cva(pageContentClassnames.content, {
+    variants: {
+        isUnconstrained: {
+            true: pageContentClassnames.isUnconstrained,
+        },
+        hasHeader: {
+            true: pageContentClassnames.contentHasHeader,
+        },
+        hasAside: {
+            true: pageContentClassnames.hasAside,
+        },
+    },
+});
 export const PageContent = forwardRef((props, forwardedRef) => {
-    const { hasAside, contentClassnames } = useLogic(props);
-    const { className, children, isFullHeight = true, footer, scrollRef, header, } = props;
-    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentClassnames, "$hasAside": hasAside || Boolean(header), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
+    const { hasAside } = useContext(PageContext);
+    const { className, children, isFullHeight = true, footer, scrollRef, header, isUnconstrained = false, } = props;
+    return (_jsxs(Wrapper, { className: classNames(className, pageContentClassnames.pageContent), ref: forwardedRef, "$isFullHeight": isFullHeight, "$isSeparatorShown": hasAside || Boolean(header), children: [header && header, _jsx(Content, { ref: scrollRef, className: contentCva({
+                    isUnconstrained,
+                    hasHeader: Boolean(header),
+                    hasAside,
+                }), children: children }), footer && !isValidElement(footer) && (_jsx(PageLayoutFooter, { ...footer })), isValidElement(footer) && footer] }));
 });

package/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/components/PageContent/constants.js

@@ -2,7 +2,9 @@ import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const pageContentClassnames = {
     pageContent: createUIKitClassname('page-content'),
     content: createUIKitClassname('page-content__content'),
+    isUnconstrained: createUIKitClassname('page-content__content_unconstrained'),
     contentHasHeader: createUIKitClassname('page-content__content_has-header'),
+    hasAside: createUIKitClassname('page-content__content_has-aside'),
     animation: createUIKitClassname('page-content_animation'),
     withPdfViewer: createUIKitClassname('page-content_with-pdf-viewer'),
 };

package/components/PageContent/styles.d.ts

@@ -10,7 +10,5 @@ export declare const Wrapper: import("../styled").StyledComponent<{
 export declare const Content: import("../styled").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/components/PageContent/styles.js

@@ -1,10 +1,7 @@
-import { cardGridClassnames } from '../CardGridInfinite/constants';
+import { selfContainedClassname } from '../constants';
 import { pdfViewerClassnames } from '../PdfViewer';
 import { styled } from '../styled';
 import { PAGE_CONTENT_ANIMATION, pageContentClassnames } from './constants';
-const getPaddingContent = (theme, hasAside) => {
-    return hasAside ? theme.spacing(4, 6, 4) : theme.spacing(0, 6, 4);
-};
 export const Wrapper = styled('article', {
     shouldForwardProp: (prop) => !['$isFullHeight', '$isSeparatorShown'].includes(prop),
 }) `
@@ -60,7 +57,11 @@ export const Content = styled.div `
   overflow: auto;
   flex-grow: 1;
 
-  padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
+  padding: ${({ theme }) => theme.spacing(0, 6, 4)};
+
+  &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
+    padding: ${({ theme }) => theme.spacing(4, 6, 4)};
+  }
 
   ${({ theme }) => theme.breakpoints.down('laptop')} {
     padding-right: ${({ theme }) => theme.spacing(4)};
@@ -80,16 +81,21 @@ export const Content = 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(.${cardGridClassnames.root}) {
-      border: none;
-    }
-
     &.${pageContentClassnames.contentHasHeader} {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &.${pageContentClassnames.isUnconstrained}, &:has(> .${selfContainedClassname}) {
+      margin: 0;
+      padding: 0;
+
+      background-color: unset;
+      border: none;
+      border-radius: 0;
+    }
   }
 
   /* Причина игнора: Не критично для отображения */

package/components/PageContent/types.d.ts

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

package/components/Profile/styles.d.ts

@@ -21,7 +21,7 @@ export declare const Credentials: import("../styled").StyledComponent<{
 export declare const StyledChevron: import("../styled").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("../styled").StyledComponent<Omit<AvatarProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {

package/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/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/components/SearchField/useLogic/useLogic.js

@@ -1,7 +1,9 @@
-import { useEffect, useState, } from 'react';
+import { useCallback, useEffect, useMemo, useState, } from 'react';
 import { useFirstMountState } from '../../useFirstMountState';
 import { useForwardedRef } from '../../useForwardedRef';
-export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRef: externalInputRef, disabled, onBlur: propsOnBlur, fullWidth, isLoading, placeholder = 'Поиск', inputComponent, hideHelperText = true, ...restProps }) => {
+import { debounce } from '../../utils/debounce';
+const DEFAULT_DEBOUNCE_TIME = 250;
+export 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 = useForwardedRef(externalInputRef);
     const [internalValue, setInternalValue] = useState(defaultValue || value || '');
     const isFirstRender = useFirstMountState();
@@ -13,13 +15,29 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
             setInternalValue('');
         }
     }, [value]);
+    const createChangeEvent = useCallback((eventValue) => ({
+        target: {
+            value: eventValue,
+        },
+    }), []);
+    const debouncedOnChange = useMemo(() => isDebounced
+        ? 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);
@@ -27,15 +45,9 @@ export const useLogic = ({ onChange: propsOnChange, defaultValue, value, inputRe
             setInternalValue(value);
         }
     };
-    const createChangeEvent = (eventValue) => {
-        return {
-            target: {
-                value: eventValue,
-            },
-        };
-    };
     const onClearValue = () => {
-        onChange?.(createChangeEvent(''));
+        setInternalValue('');
+        propsOnChange?.(createChangeEvent(''));
         inputRef.current.value = '';
         inputRef.current?.focus();
     };

package/components/constants/classnames.d.ts

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

package/components/constants/classnames.js

@@ -0,0 +1,2 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const selfContainedClassname = createUIKitClassname('self-contained');

package/components/constants/index.d.ts

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

package/components/constants/index.js

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

package/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/components/fileUploading/FileUploaderDropzone/HintPlaceholder/HintPlaceholder.js

@@ -7,7 +7,10 @@ import { useLogic } from './useLogic';
 export const HintPlaceholder = (props) => {
     const { extensions, className, isMultiple, maxFileCount, maxFileSize, placeholder, } = useLogic(props);
     if (placeholder) {
-        return (_jsx(Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: placeholder }));
+        if (typeof placeholder === 'string') {
+            return (_jsx(Typography, { className: className, color: "grey", colorIntensity: "600", variant: "caption", align: "center", children: placeholder }));
+        }
+        return placeholder;
     }
     if (isMultiple) {
         return (_jsxs(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, ' ', declensionFile(maxFileCount), " \u0440\u0430\u0437\u043C\u0435\u0440\u043E\u043C \u043D\u0435 \u0431\u043E\u043B\u0435\u0435", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));

package/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/components/fileUploading/PreviewFileUploaderDropZone/HintPlaceholder/HintPlaceholder.js

@@ -1,9 +1,18 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { formatFileSizeToView } from '@astral/utils/file/formatFileSizeToView';
 import { Typography } from '../../../Typography';
 import { Extensions, Wrapper } from './styles';
 import { useLogic } from './useLogic';
 export const HintPlaceholder = (props) => {
     const { extensions, imageProps, maxFileSize, placeholder, className, RenderImage, } = useLogic(props);
-    return (_jsxs(Wrapper, { className: className, children: [_jsx(RenderImage, { ...imageProps, alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" }), _jsx(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder || (_jsxs(_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", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] })) })] }));
+    const renderPlaceholder = () => {
+        if (!placeholder) {
+            return (_jsxs(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", ' ', formatFileSizeToView(maxFileSize), extensions && ' в формате ', _jsx(Extensions, { children: extensions })] }));
+        }
+        if (typeof placeholder === 'string') {
+            return (_jsx(Typography, { component: "p", color: "textSecondary", variant: "caption", align: "center", children: placeholder }));
+        }
+        return placeholder;
+    };
+    return (_jsxs(Wrapper, { className: className, children: [_jsx(RenderImage, { ...imageProps, alt: "\u0424\u0430\u0439\u043B\u044B \u0434\u043B\u044F \u0437\u0430\u0433\u0440\u0443\u0437\u043A\u0438" }), renderPlaceholder()] }));
 };

package/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/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/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/components/fileUploading/types.d.ts

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

package/components/useProfiler/index.d.ts

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

package/components/useProfiler/index.js

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

package/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/components/useProfiler/useProfiler.js

@@ -0,0 +1,46 @@
+/** biome-ignore-all lint/suspicious/noConsole: сообщения для отладки */
+import { useEffect, useRef } from 'react';
+import { isObject, shallowEqual } from './utils';
+/**
+ * Хук для отладки ререндеров компонентов.
+ * Логирует номер рендера, изменившиеся props и предупреждает,
+ * если ссылка на объект изменилась при неизменном содержимом.
+ *
+ * Только для внутреннего использования в uikit, не является публичным API.
+ */
+export const useProfiler = ({ componentName, props, id, }) => {
+    const renderCountRef = useRef(0);
+    const prevPropsRef = 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 = isObject(currentValue) && shallowEqual(prevValue, currentValue);
+            changedProps[key] = {
+                from: prevValue,
+                to: currentValue,
+                isLinkChangedButContentEqual: isContentEqual,
+            };
+        }
+    });
+    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;
+};

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

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

package/components/useProfiler/utils/index.js

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

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

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

package/components/useProfiler/utils/shallowEqual/index.js

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

package/components/useProfiler/utils/shallowEqual/shallowEqual.d.ts

@@ -0,0 +1,5 @@
+export declare const isObject: (value: unknown) => value is Record<string, unknown>;
+/**
+ * Поверхностное сравнение объектов (ключ-в-ключ)
+ */
+export declare const shallowEqual: (objA: unknown, objB: unknown) => boolean;

package/components/useProfiler/utils/shallowEqual/shallowEqual.js

@@ -0,0 +1,26 @@
+export const isObject = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+/**
+ * Поверхностное сравнение объектов (ключ-в-ключ)
+ */
+export const shallowEqual = (objA, objB) => {
+    if (Object.is(objA, objB)) {
+        return true;
+    }
+    if (!isObject(objA) || !isObject(objB)) {
+        return false;
+    }
+    const keysA = Object.keys(objA);
+    const keysB = Object.keys(objB);
+    if (keysA.length !== keysB.length) {
+        return false;
+    }
+    for (const key of keysA) {
+        if (!Object.prototype.hasOwnProperty.call(objB, key) ||
+            !Object.is(objA[key], objB[key])) {
+            return false;
+        }
+    }
+    return true;
+};

package/hook-form/FormFilters/FormFilters.js

@@ -16,7 +16,7 @@ export const FormFilters = (props) => {
     const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, quickFilters: QuickFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = useLogic(props);
     const { filtersClassName, quickFiltersClassName } = useContext(FormFiltersLayoutContext) ?? {};
     if (isLoading) {
-        return _jsx(FormFiltersSkeleton, {});
+        return _jsx(FormFiltersSkeleton, { hasQuickFilters: Boolean(QuickFilters) });
     }
     return (_jsxs(_Fragment, { children: [_jsx(FormControlProvider, { size: "small", hideHelperText: true, children: _jsx(Form, { name: "astral-ui-form-filters", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), className: filtersClassName, children: _jsxs(Wrapper, { children: [SearchField && _jsx(SearchField, { control: form.control }), _jsx(AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField), hasQuickFilters: Boolean(QuickFilters) }), _jsx(MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && (_jsx(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && (_jsx(SubmitButtonWrapper, { children: _jsx(SubmitButton, { size: "medium", className: formFiltersClassnames.submitButton }) }))] }) }) }), QuickFilters && (_jsx(QuickFiltersWrapper, { className: quickFiltersClassName, children: _jsx(QuickFilters, { control: form.control }) })), _jsx(FormFiltersDialog, { ...dialogProps })] }));
 };

package/hook-form/FormFilters/FormFiltersSkeleton/FormFiltersSkeleton.d.ts

@@ -1 +1,5 @@
-export declare const FormFiltersSkeleton: () => import("react/jsx-runtime").JSX.Element;
+type FormFiltersSkeletonProps = {
+    hasQuickFilters?: boolean;
+};
+export declare const FormFiltersSkeleton: ({ hasQuickFilters, }: FormFiltersSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/hook-form/FormFilters/FormFiltersSkeleton/FormFiltersSkeleton.js

@@ -1,9 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { FormFiltersLayoutContext } from '../../../components/PageHeader';
 import { Skeleton } from '../../../components/Skeleton';
+import { FormQuickFiltersSkeleton } from '../FormQuickFiltersSkeleton';
 import { SkeletonWrapper } from './styles';
-export const FormFiltersSkeleton = () => {
+export const FormFiltersSkeleton = ({ hasQuickFilters, }) => {
     const { filtersClassName } = useContext(FormFiltersLayoutContext) ?? {};
-    return (_jsxs(SkeletonWrapper, { className: filtersClassName, children: [_jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" })] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(SkeletonWrapper, { className: filtersClassName, children: [_jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" }), _jsx(Skeleton, { variant: "rounded" })] }), hasQuickFilters && _jsx(FormQuickFiltersSkeleton, {})] }));
 };