@astral/ui 4.74.0 → 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/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;