@astral/ui 4.13.1 → 4.14.0

package/node/components/PageLayout/PageContent/styles.js

@@ -27,9 +27,7 @@ exports.Wrapper = (0, styles_1.styled)('article', {
     order: 4;
 
     height: ${({ $isFullHeight }) => ($isFullHeight ? 'auto' : '100%')};
-    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
 
-    background-color: ${({ theme }) => theme.palette.background.default};
     border-top: none;
     border-radius: ${({ theme }) => theme.shape.medium};
   }
@@ -66,9 +64,14 @@ exports.Content = styles_1.styled.div `
   padding: ${({ theme, $hasAside }) => getPaddingContent(theme, $hasAside)};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+
     overflow: hidden;
 
+    margin: ${({ theme }) => theme.spacing(0, 4, 4)};
     padding: ${({ theme }) => theme.spacing(4, 4, 3)};
+
+    background-color: ${({ theme }) => theme.palette.background.default};
   }
 
   &:has(.${PdfViewer_1.pdfViewerClassnames.document}.${PdfViewer_1.pdfViewerClassnames.zoom}) {

package/node/components/PageLayout/PageLayoutContainer/index.d.ts

@@ -1 +1,2 @@
 export * from './PageLayoutContainer';
+export { pageLayoutClassnames } from './constants';

package/node/components/PageLayout/PageLayoutContainer/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.pageLayoutClassnames = void 0;
 __exportStar(require("./PageLayoutContainer"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "pageLayoutClassnames", { enumerable: true, get: function () { return constants_1.pageLayoutClassnames; } });

package/node/components/PageLayout/PageLayoutContainer/styles.d.ts

@@ -3,9 +3,6 @@ export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StylePaper: import("@emotion/styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").PaperProps>, "elevation"> & {
-    elevation?: 0 | 1 | 2 | undefined;
-    shape?: "small" | "medium" | "large" | undefined;
-} & {
+export declare const StylePaper: import("@emotion/styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Paper/Paper.d.ts

@@ -16,4 +16,4 @@ export type PaperProps = Omit<WithoutEmotionSpecific<MuiPaperProps>, 'elevation'
      */
     shape?: 'small' | 'medium' | 'large';
 };
-export declare const Paper: ({ shape, ...restProps }: PaperProps) => JSX.Element;
+export declare const Paper: import("react").ForwardRefExoticComponent<Omit<PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/node/components/Paper/Paper.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Paper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styles_1 = require("./styles");
-const Paper = ({ shape = 'medium', ...restProps }) => {
-    return (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { "$shape": shape, ...restProps });
-};
-exports.Paper = Paper;
+exports.Paper = (0, react_1.forwardRef)(({ shape = 'medium', ...restProps }, ref) => {
+    return (0, jsx_runtime_1.jsx)(styles_1.StyledPaper, { ref: ref, "$shape": shape, ...restProps });
+});

package/node/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useScrollManagement/useScrollManagement.d.ts

@@ -3,11 +3,12 @@ type UseScrollManagementParams = {
     scrollRef: RefObject<HTMLElement>;
     isEndReached?: boolean;
     onLoadMore?: () => void;
+    virtuosoId: string;
 };
 /**
  * Отслеживание скролла для динамического отображения футера
  */
-export declare const useScrollManagement: ({ scrollRef, isEndReached, onLoadMore, }: UseScrollManagementParams) => {
+export declare const useScrollManagement: ({ scrollRef, isEndReached, onLoadMore, virtuosoId, }: UseScrollManagementParams) => {
     scrollParent: HTMLElement | null;
     hasVerticalScroll: boolean;
     recalculateVerticalScroll: () => void;

package/node/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useScrollManagement/useScrollManagement.js

@@ -2,14 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useScrollManagement = void 0;
 const react_1 = require("react");
-const constants_1 = require("../../../constants");
+const PageLayoutContainer_1 = require("../../../PageLayout/PageLayoutContainer");
+const useViewportType_1 = require("../../useViewportType");
 /**
  * Отслеживание скролла для динамического отображения футера
  */
-const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, }) => {
+const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, virtuosoId, }) => {
     const [scrollParent, setScrollParent] = (0, react_1.useState)(null);
     const [hasVerticalScroll, setHasVerticalScroll] = (0, react_1.useState)(false);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     (0, react_1.useEffect)(() => {
+        if (isMobile) {
+            // На мобильных устройствах scroll находится на контейнере pageLayout
+            const rootScrollElement = document.querySelector(`.${PageLayoutContainer_1.pageLayoutClassnames.root}`);
+            if (rootScrollElement instanceof HTMLElement) {
+                setScrollParent(rootScrollElement);
+                return;
+            }
+        }
         if (scrollRef?.current) {
             setScrollParent(scrollRef.current);
         }
@@ -18,7 +28,7 @@ const useScrollManagement = ({ scrollRef, isEndReached, onLoadMore, }) => {
         }
     }, [scrollRef]);
     const recalculateVerticalScroll = () => {
-        const list = document.getElementById(constants_1.VIRTUOSO_CONTAINER_ID);
+        const list = document.getElementById(virtuosoId);
         if (scrollRef?.current && list) {
             setHasVerticalScroll(list?.clientHeight > scrollRef.current?.clientHeight);
         }

package/node/components/{InfiniteTreeList/useLogic/hooks → hooks/Infinite}/useStickyButton/useStickyButton.js

@@ -2,13 +2,13 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStickyButton = void 0;
 const react_1 = require("react");
-const hooks_1 = require("../../../../hooks");
+const useToggle_1 = require("../../useToggle");
 /**
  * Управление кнопкой "наверх"
  */
 const useStickyButton = (scrollRef) => {
     const virtuoso = (0, react_1.useRef)(null);
-    const [isStickyButtonActive, showStickyButton, hideStickyButton] = (0, hooks_1.useToggle)();
+    const [isStickyButtonActive, showStickyButton, hideStickyButton] = (0, useToggle_1.useToggle)();
     const handleRangeChanged = (0, react_1.useCallback)((range) => {
         const shouldShow = range.startIndex > 2;
         if (isStickyButtonActive !== shouldShow) {
@@ -17,7 +17,7 @@ const useStickyButton = (scrollRef) => {
     }, [showStickyButton, hideStickyButton]);
     const handleScrollToTop = () => {
         scrollRef.current.style.scrollBehavior = 'auto';
-        virtuoso.current?.scrollIntoView({ index: 0, behavior: 'auto' });
+        virtuoso.current?.scrollToIndex(0);
     };
     return {
         virtuoso,

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

@@ -17,3 +17,4 @@ export { useCheckControlled } from './useCheckControlled';
 export * from './usePopoverAnimation';
 export { useAsyncOptions } from './useAsyncOptions';
 export { useLoadingState } from './useLoadingState';
+export { useScrollManagement, useStickyButton } from './Infinite';

package/node/components/hooks/index.js

@@ -14,7 +14,7 @@ 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 });
-exports.useLoadingState = exports.useAsyncOptions = exports.useCheckControlled = exports.useViewportType = exports.useSecondsCountdown = exports.useLocaleDateTimeFormat = void 0;
+exports.useStickyButton = exports.useScrollManagement = exports.useLoadingState = exports.useAsyncOptions = exports.useCheckControlled = exports.useViewportType = exports.useSecondsCountdown = exports.useLocaleDateTimeFormat = void 0;
 __exportStar(require("./external"), exports);
 __exportStar(require("./useClickAwayEffect"), exports);
 __exportStar(require("./useEscapeClickEffect"), exports);
@@ -40,3 +40,6 @@ var useAsyncOptions_1 = require("./useAsyncOptions");
 Object.defineProperty(exports, "useAsyncOptions", { enumerable: true, get: function () { return useAsyncOptions_1.useAsyncOptions; } });
 var useLoadingState_1 = require("./useLoadingState");
 Object.defineProperty(exports, "useLoadingState", { enumerable: true, get: function () { return useLoadingState_1.useLoadingState; } });
+var Infinite_1 = require("./Infinite");
+Object.defineProperty(exports, "useScrollManagement", { enumerable: true, get: function () { return Infinite_1.useScrollManagement; } });
+Object.defineProperty(exports, "useStickyButton", { enumerable: true, get: function () { return Infinite_1.useStickyButton; } });

package/node/components/placeholders/LoadingPlaceholder/LoadingPlaceholder.js

@@ -4,17 +4,18 @@ exports.LoadingPlaceholder = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const Loader_1 = require("../../Loader");
 const Typography_1 = require("../../Typography");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Дефолтный лоадер загрузки
  */
 const LoadingPlaceholder = ({ title, content, isShowLoader = true, }) => {
     if (!isShowLoader) {
-        return (0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, {});
+        return (0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root });
     }
     if (content) {
-        return (0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { children: content });
+        return ((0, jsx_runtime_1.jsx)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root, children: content }));
     }
-    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.LoadingContainer, { className: constants_1.loadingPlaceholderClassnames.root, children: [(0, jsx_runtime_1.jsx)(Loader_1.Loader, {}), title && (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "h4", children: title })] }));
 };
 exports.LoadingPlaceholder = LoadingPlaceholder;

package/node/components/placeholders/LoadingPlaceholder/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const loadingPlaceholderClassnames: {
+    root: string;
+};

package/node/components/placeholders/LoadingPlaceholder/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadingPlaceholderClassnames = void 0;
+const utils_1 = require("../../utils");
+exports.loadingPlaceholderClassnames = {
+    root: (0, utils_1.createUIKitClassname)('loading-placeholder'),
+};

package/node/components/placeholders/LoadingPlaceholder/index.d.ts

@@ -1 +1,2 @@
 export * from './LoadingPlaceholder';
+export { loadingPlaceholderClassnames } from './constants';

package/node/components/placeholders/LoadingPlaceholder/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.loadingPlaceholderClassnames = void 0;
 __exportStar(require("./LoadingPlaceholder"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "loadingPlaceholderClassnames", { enumerable: true, get: function () { return constants_1.loadingPlaceholderClassnames; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.13.1",
+  "version": "4.14.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {
@@ -141,6 +141,13 @@
       "types": "./hook-form/FormTreeLikeAsyncAutocomplete/index.d.ts",
       "default": "./hook-form/FormTreeLikeAsyncAutocomplete/index.js",
       "import": "./hook-form/FormTreeLikeAsyncAutocomplete/index.js"
+    },
+    "./components/CardGridInfinite": {
+      "module": "./components/CardGridInfinite/index.js",
+      "require": "./node/components/CardGridInfinite/index.js",
+      "types": "./components/CardGridInfinite/index.d.ts",
+      "default": "./components/CardGridInfinite/index.js",
+      "import": "./components/CardGridInfinite/index.js"
     }
   },
   "author": "Astral.Soft",