@astral/ui 4.74.0 → 4.76.0

package/node/components/PageContent/constants.js

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

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.pageContentClassnames = void 0;
+exports.PageContentHeaderActionsSkeleton = exports.PageContentHeaderActions = exports.PageContentHeader = exports.PageContent = exports.pageContentClassnames = void 0;
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "pageContentClassnames", { enumerable: true, get: function () { return constants_1.pageContentClassnames; } });
 var PageContent_1 = require("./PageContent");
@@ -8,3 +8,4 @@ Object.defineProperty(exports, "PageContent", { enumerable: true, get: function
 var PageContentHeader_1 = require("./PageContentHeader");
 Object.defineProperty(exports, "PageContentHeader", { enumerable: true, get: function () { return PageContentHeader_1.PageContentHeader; } });
 Object.defineProperty(exports, "PageContentHeaderActions", { enumerable: true, get: function () { return PageContentHeader_1.PageContentHeaderActions; } });
+Object.defineProperty(exports, "PageContentHeaderActionsSkeleton", { enumerable: true, get: function () { return PageContentHeader_1.PageContentHeaderActionsSkeleton; } });

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

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

package/node/components/PageContent/styles.js

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

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

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

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

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

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

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

package/node/components/constants/classnames.js

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

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

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

package/node/components/constants/index.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

package/node/components/useProfiler/index.js

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

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

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

package/node/components/useProfiler/useProfiler.js

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shallowEqual = exports.isObject = void 0;
+const isObject = (value) => {
+    return typeof value === 'object' && value !== null;
+};
+exports.isObject = isObject;
+/**
+ * Поверхностное сравнение объектов (ключ-в-ключ)
+ */
+const shallowEqual = (objA, objB) => {
+    if (Object.is(objA, objB)) {
+        return true;
+    }
+    if (!(0, exports.isObject)(objA) || !(0, exports.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;
+};
+exports.shallowEqual = shallowEqual;

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

@@ -19,7 +19,7 @@ const FormFilters = (props) => {
     const { form, onSubmit, searchField: SearchField, mainFilters: MainFilters, quickFilters: QuickFilters, submitButton: SubmitButton, secondaryFilters: SecondaryFilters, onOpenModal, dialogProps, mainFiltersColumns, isLoading, } = (0, useLogic_1.useLogic)(props);
     const { filtersClassName, quickFiltersClassName } = (0, react_1.useContext)(PageHeader_1.FormFiltersLayoutContext) ?? {};
     if (isLoading) {
-        return (0, jsx_runtime_1.jsx)(FormFiltersSkeleton_1.FormFiltersSkeleton, {});
+        return (0, jsx_runtime_1.jsx)(FormFiltersSkeleton_1.FormFiltersSkeleton, { hasQuickFilters: Boolean(QuickFilters) });
     }
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FormControlProvider_1.FormControlProvider, { size: "small", hideHelperText: true, children: (0, jsx_runtime_1.jsx)(Form_1.Form, { name: "astral-ui-form-filters", form: form, onSubmit: form.handleSubmit(onSubmit || (() => undefined)), className: filtersClassName, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { children: [SearchField && (0, jsx_runtime_1.jsx)(SearchField, { control: form.control }), (0, jsx_runtime_1.jsx)(AllFiltersButton_1.AllFiltersButton, { form: form, onOpenModal: onOpenModal, hasMainFilters: Boolean(MainFilters), hasSecondaryFilters: Boolean(SecondaryFilters), hasSearch: Boolean(SearchField), hasQuickFilters: Boolean(QuickFilters) }), (0, jsx_runtime_1.jsx)(styles_1.MainFiltersWrapper, { columns: mainFiltersColumns, children: MainFilters && ((0, jsx_runtime_1.jsx)(MainFilters, { control: form.control, isModal: false })) }), SubmitButton && ((0, jsx_runtime_1.jsx)(styles_1.SubmitButtonWrapper, { children: (0, jsx_runtime_1.jsx)(SubmitButton, { size: "medium", className: constants_1.formFiltersClassnames.submitButton }) }))] }) }) }), QuickFilters && ((0, jsx_runtime_1.jsx)(styles_1.QuickFiltersWrapper, { className: quickFiltersClassName, children: (0, jsx_runtime_1.jsx)(QuickFilters, { control: form.control }) })), (0, jsx_runtime_1.jsx)(FormFiltersDialog_1.FormFiltersDialog, { ...dialogProps })] }));
 };

package/node/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/node/hook-form/FormFilters/FormFiltersSkeleton/FormFiltersSkeleton.js

@@ -5,9 +5,10 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const PageHeader_1 = require("../../../components/PageHeader");
 const Skeleton_1 = require("../../../components/Skeleton");
+const FormQuickFiltersSkeleton_1 = require("../FormQuickFiltersSkeleton");
 const styles_1 = require("./styles");
-const FormFiltersSkeleton = () => {
+const FormFiltersSkeleton = ({ hasQuickFilters, }) => {
     const { filtersClassName } = (0, react_1.useContext)(PageHeader_1.FormFiltersLayoutContext) ?? {};
-    return ((0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { className: filtersClassName, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.SkeletonWrapper, { className: filtersClassName, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded" })] }), hasQuickFilters && (0, jsx_runtime_1.jsx)(FormQuickFiltersSkeleton_1.FormQuickFiltersSkeleton, {})] }));
 };
 exports.FormFiltersSkeleton = FormFiltersSkeleton;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormQuickFiltersSkeleton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const PageHeader_1 = require("../../../components/PageHeader");
+const Skeleton_1 = require("../../../components/Skeleton");
+const styles_1 = require("./styles");
+const FormQuickFiltersSkeleton = () => {
+    const { quickFiltersClassName } = (0, react_1.useContext)(PageHeader_1.FormFiltersLayoutContext) ?? {};
+    return ((0, jsx_runtime_1.jsxs)(styles_1.FormQuickFiltersSkeletonWrapper, { className: quickFiltersClassName, children: [(0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 42, height: 24 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 92, height: 24 }), (0, jsx_runtime_1.jsx)(Skeleton_1.Skeleton, { variant: "rounded", width: 124, height: 24 })] }));
+};
+exports.FormQuickFiltersSkeleton = FormQuickFiltersSkeleton;

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormQuickFiltersSkeletonWrapper = void 0;
+const styled_1 = require("../../../components/styled");
+exports.FormQuickFiltersSkeletonWrapper = styled_1.styled.div `
+  display: flex;
+  gap: ${({ theme }) => theme.spacing(2)};
+`;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.74.0",
+  "version": "4.76.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/PageContent/useLogic/useLogic.d.ts

@@ -1,7 +0,0 @@
-import type { PageContentProps } from '../types';
-type UseLogicParams = PageContentProps;
-export declare const useLogic: ({ header }: UseLogicParams) => {
-    contentClassnames: string;
-    hasAside: boolean;
-};
-export {};

package/components/PageContent/useLogic/useLogic.js

@@ -1,11 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { PageContext } from '../../PageContext';
-import { classNames } from '../../utils/classNames';
-import { pageContentClassnames } from '../constants';
-export const useLogic = ({ header }) => {
-    const { hasAside } = useContext(PageContext);
-    const contentClassnames = useMemo(() => classNames(pageContentClassnames.content, {
-        [pageContentClassnames.contentHasHeader]: Boolean(header),
-    }), [header]);
-    return { contentClassnames, hasAside };
-};

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

@@ -1,7 +0,0 @@
-import type { PageContentProps } from '../types';
-type UseLogicParams = PageContentProps;
-export declare const useLogic: ({ header }: UseLogicParams) => {
-    contentClassnames: string;
-    hasAside: boolean;
-};
-export {};

package/node/components/PageContent/useLogic/useLogic.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useLogic = void 0;
-const react_1 = require("react");
-const PageContext_1 = require("../../PageContext");
-const classNames_1 = require("../../utils/classNames");
-const constants_1 = require("../constants");
-const useLogic = ({ header }) => {
-    const { hasAside } = (0, react_1.useContext)(PageContext_1.PageContext);
-    const contentClassnames = (0, react_1.useMemo)(() => (0, classNames_1.classNames)(constants_1.pageContentClassnames.content, {
-        [constants_1.pageContentClassnames.contentHasHeader]: Boolean(header),
-    }), [header]);
-    return { contentClassnames, hasAside };
-};
-exports.useLogic = useLogic;