@astral/ui 4.74.0 → 4.76.0

package/components/PageContent/PageContentHeader/useLogic/useLogic.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import { pageHeaderClassnames } from '../../../PageHeader';
+import { useViewportType } from '../../../useViewportType';
+export const useLogic = () => {
+    const [pageHeaderContainer, setPageHeaderContainer] = useState(null);
+    const { isMobile } = useViewportType();
+    useEffect(() => {
+        const container = document.querySelector(`.${pageHeaderClassnames.root}`);
+        setPageHeaderContainer(container);
+    }, []);
+    return {
+        pageHeaderContainer,
+        isMobile,
+    };
+};

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/public.d.ts

@@ -1,4 +1,4 @@
 export { pageContentClassnames } from './constants';
 export { PageContent } from './PageContent';
-export { PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, type PageContentHeaderProps, } from './PageContentHeader';
+export { PageContentHeader, PageContentHeaderActions, type PageContentHeaderActionsProps, PageContentHeaderActionsSkeleton, type PageContentHeaderProps, } from './PageContentHeader';
 export type { PageContentProps } from './types';

package/components/PageContent/public.js

@@ -1,3 +1,3 @@
 export { pageContentClassnames } from './constants';
 export { PageContent } from './PageContent';
-export { PageContentHeader, PageContentHeaderActions, } from './PageContentHeader';
+export { PageContentHeader, PageContentHeaderActions, PageContentHeaderActionsSkeleton, } from './PageContentHeader';

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,12 +57,20 @@ 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)};
     padding-bottom: ${({ theme }) => theme.spacing(3)};
     padding-left: ${({ theme }) => theme.spacing(4)};
+
+    &.${pageContentClassnames.contentHasHeader}, &.${pageContentClassnames.hasAside} {
+      padding: ${({ theme }) => theme.spacing(4, 4, 3)};
+    }
   }
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
@@ -80,16 +85,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/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, {})] }));
 };

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

@@ -0,0 +1 @@
+export declare const FormQuickFiltersSkeleton: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { FormFiltersLayoutContext } from '../../../components/PageHeader';
+import { Skeleton } from '../../../components/Skeleton';
+import { FormQuickFiltersSkeletonWrapper } from './styles';
+export const FormQuickFiltersSkeleton = () => {
+    const { quickFiltersClassName } = useContext(FormFiltersLayoutContext) ?? {};
+    return (_jsxs(FormQuickFiltersSkeletonWrapper, { className: quickFiltersClassName, children: [_jsx(Skeleton, { variant: "rounded", width: 42, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 92, height: 24 }), _jsx(Skeleton, { variant: "rounded", width: 124, height: 24 })] }));
+};

package/hook-form/FormFilters/FormQuickFiltersSkeleton/index.d.ts

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

package/hook-form/FormFilters/FormQuickFiltersSkeleton/index.js

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

package/hook-form/FormFilters/FormQuickFiltersSkeleton/styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const FormQuickFiltersSkeletonWrapper: import("../../../components/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/hook-form/FormFilters/FormQuickFiltersSkeleton/styles.js

@@ -0,0 +1,5 @@
+import { styled } from '../../../components/styled';
+export const FormQuickFiltersSkeletonWrapper = styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;

package/node/components/CardGridInfinite/CardGridInfinite.js

@@ -5,8 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_virtuoso_1 = require("react-virtuoso");
 const ContentState_1 = require("../ContentState");
+const constants_1 = require("../constants");
+const cva_1 = require("../utils/cva");
 const Card_1 = require("./Card");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const Footer_1 = require("./Footer");
 const List_1 = require("./List");
 const NoDataPlaceholder_1 = require("./NoDataPlaceholder");
@@ -14,8 +16,15 @@ const OnTopButton_1 = require("./OnTopButton");
 const SkeletonGrid_1 = require("./SkeletonGrid");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
+const rootCva = (0, cva_1.cva)([constants_2.cardGridClassnames.root, constants_1.selfContainedClassname], {
+    variants: {
+        isLoading: {
+            true: constants_2.cardGridClassnames.loading,
+        },
+    },
+});
 const CardGridInfinite = (props) => {
-    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, classnames, isMobile, } = (0, useLogic_1.useLogic)(props);
+    const { contentStateProps, desktopCardWidth, virtuosoProps, scrollParent, skeleton, footerProps, onTopButtonProps, list, noDataImgSrc, defineCard, isLoading, isMobile, } = (0, useLogic_1.useLogic)(props);
     const VirtuosoList = (0, react_1.useMemo)(() => (0, react_1.forwardRef)((listProps, ref) => ((0, jsx_runtime_1.jsx)(List_1.List, { ...listProps, ref: ref, desktopCardWidth: desktopCardWidth }))), [desktopCardWidth]);
     const renderVirtuoso = () => {
         if (!scrollParent) {
@@ -28,11 +37,11 @@ const CardGridInfinite = (props) => {
                     Footer: () => (0, jsx_runtime_1.jsx)(Footer_1.Footer, { ...footerProps }),
                 }, itemContent: (_, item) => (0, jsx_runtime_1.jsx)(Card_1.Card, { item: item, ...defineCard(item) }) }));
         }
-        return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.VirtuosoGrid, { ...virtuosoProps, data: list, customScrollParent: scrollParent, listClassName: constants_1.cardGridClassnames.list, components: {
+        return ((0, jsx_runtime_1.jsx)(react_virtuoso_1.VirtuosoGrid, { ...virtuosoProps, data: list, customScrollParent: scrollParent, listClassName: constants_2.cardGridClassnames.list, components: {
                 List: VirtuosoList,
                 Footer: () => (0, jsx_runtime_1.jsx)(Footer_1.Footer, { ...footerProps }),
             }, itemContent: (_, item) => (0, jsx_runtime_1.jsx)(Card_1.Card, { item: item, ...defineCard(item) }) }));
     };
-    return ((0, jsx_runtime_1.jsx)(styles_1.ContentStateWrapper, { className: classnames, children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: (0, jsx_runtime_1.jsx)(SkeletonGrid_1.SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderVirtuoso(), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ContentStateWrapper, { className: rootCva({ isLoading }), children: (0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { ...contentStateProps, loadingContent: (0, jsx_runtime_1.jsx)(SkeletonGrid_1.SkeletonGrid, { skeleton: skeleton, desktopCardWidth: desktopCardWidth }), children: list?.length ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderVirtuoso(), (0, jsx_runtime_1.jsx)(OnTopButton_1.OnTopButton, { ...onTopButtonProps })] })) : ((0, jsx_runtime_1.jsx)(NoDataPlaceholder_1.NoDataPlaceholder, { noDataImgSrc: noDataImgSrc })) }) }));
 };
 exports.CardGridInfinite = CardGridInfinite;

package/node/components/CardGridInfinite/styles.js

@@ -26,4 +26,8 @@ exports.ContentStateWrapper = styled_1.styled.div `
   & .${LoadingPlaceholder_1.loadingPlaceholderClassnames.root} {
     justify-content: flex-start
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
+  }
 `;

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

@@ -37,6 +37,6 @@ export declare const useLogic: <TDataItem extends Record<string, unknown>>({ lis
     list: TDataItem[] | undefined;
     noDataImgSrc: string | undefined;
     defineCard: (itemData: TDataItem) => Omit<import("..").CardProps<TDataItem>, "item">;
-    classnames: string;
+    isLoading: boolean | undefined;
 };
 export {};

package/node/components/CardGridInfinite/useLogic/useLogic.js

@@ -6,17 +6,10 @@ const ConfigProvider_1 = require("../../ConfigProvider");
 const useScrollManagement_1 = require("../../useScrollManagement");
 const useStickyButton_1 = require("../../useStickyButton");
 const useViewportType_1 = require("../../useViewportType");
-const classNames_1 = require("../../utils/classNames");
 const constants_1 = require("../constants");
 const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef, skeleton, onRetry, endOfScrollMsg, isEndReached, onLoadMore, noDataImgSrc, defineCard, desktopCardWidth, }) => {
     const { imagesMap } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext);
     const { isMobile } = (0, useViewportType_1.useViewportType)();
-    (0, react_1.useEffect)(() => {
-        if (isMobile && scrollRef?.current) {
-            scrollRef.current.style.backgroundColor = 'unset';
-            scrollRef.current.style.padding = 'unset';
-        }
-    }, [isMobile]);
     const contentStateProps = (0, react_1.useMemo)(() => {
         const isNoData = !list?.length;
         return {
@@ -42,9 +35,6 @@ const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef,
         recalculateVerticalScroll();
         propsHandleRangeChanged(range);
     };
-    const classnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.cardGridClassnames.root, {
-        [constants_1.cardGridClassnames.loading]: isLoading,
-    }), [isLoading]);
     return {
         contentStateProps,
         desktopCardWidth,
@@ -74,7 +64,7 @@ const useLogic = ({ list, isLoading, isError, errorMsg, errorImgSrc, scrollRef,
         list,
         noDataImgSrc,
         defineCard,
-        classnames,
+        isLoading,
     };
 };
 exports.useLogic = useLogic;

package/node/components/Chevron/Chevron.d.ts

@@ -1,5 +1,5 @@
-import { type SvgIconProps } from '@mui/material/SvgIcon';
 import type { ReactElement } from 'react';
+import { type SvgIconProps } from '../SvgIcon';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 export type ChevronProps = {
     isActive?: boolean;

package/node/components/ConfirmAction/ConfirmAction.js

@@ -11,7 +11,7 @@ const ConfirmAction = (props) => {
     const { actionComponentProps, popoverProps, cancelButtonProps, confirmButtonProps, } = (0, useLogic_1.useLogic)(props);
     const { text, confirmButtonProps: externalConfirmButtonProps, popoverProps: externalPopoverProps, actionComponent, } = props;
     const { text: confirmButtonText = 'Подтвердить' } = externalConfirmButtonProps || {};
-    const { anchorOrigin = constants_1.DEFAULT_ANCHOR_ORIGIN, transformOrigin = constants_1.DEFAULT_TRANSFORM_ORIGIN, } = externalPopoverProps || {};
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actionComponent(actionComponentProps), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, ...popoverProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [text && (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: text }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
+    const { anchorOrigin = constants_1.DEFAULT_ANCHOR_ORIGIN, transformOrigin = constants_1.DEFAULT_TRANSFORM_ORIGIN, title = constants_1.DEFAULT_MOBILE_TITLE, } = externalPopoverProps || {};
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [actionComponent(actionComponentProps), (0, jsx_runtime_1.jsx)(Popover_1.Popover, { anchorOrigin: anchorOrigin, transformOrigin: transformOrigin, title: title, ...popoverProps, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [text && (0, jsx_runtime_1.jsx)(styles_1.StyledTypography, { children: text }), (0, jsx_runtime_1.jsxs)(styles_1.Actions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: confirmButtonText })] })] }) })] }));
 };
 exports.ConfirmAction = ConfirmAction;

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

@@ -6,6 +6,7 @@ export declare const DEFAULT_TRANSFORM_ORIGIN: {
     vertical: string;
     horizontal: string;
 };
+export declare const DEFAULT_MOBILE_TITLE = "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u0435 \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044F";
 export declare const confirmActionClassnames: {
     actionComponent: string;
 };