@astral/ui 4.44.0 → 4.45.0

package/components/PageContent/constants.d.ts

@@ -3,5 +3,6 @@ export declare const pageContentClassnames: {
     content: string;
     contentHasHeader: string;
     animation: string;
+    withPdfViewer: string;
 };
 export declare const PAGE_CONTENT_ANIMATION = "white-flash";

package/components/PageContent/constants.js

@@ -4,5 +4,6 @@ export const pageContentClassnames = {
     content: createUIKitClassname('page-content__content'),
     contentHasHeader: createUIKitClassname('page-content__content_has-header'),
     animation: createUIKitClassname('page-content_animation'),
+    withPdfViewer: createUIKitClassname('page-content_with-pdf-viewer'),
 };
 export const PAGE_CONTENT_ANIMATION = 'white-flash';

package/components/PageContent/styles.js

@@ -106,4 +106,17 @@ export const Content = styled.div `
       padding: ${({ theme }) => theme.spacing(4, 4, 3)};
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &&.${pageContentClassnames.withPdfViewer} {
+      margin: 0;
+      padding-top: 0;
+      padding-right: 0;
+      padding-left: 0;
+
+      background-color: ${({ theme }) => theme.palette.background.body};
+      border: unset;
+      border-radius: 0;
+    }
+  }
 `;

package/components/PdfViewer/List/styles.js

@@ -3,4 +3,8 @@ export const Wrapper = styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: 0;
+  }
 `;

package/components/PdfViewer/PdfDocument/styles.js

@@ -47,4 +47,9 @@ export const StyledDocument = styled(Document, {
       opacity: 1;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+    padding: 0;
+  }
 `;

package/components/PdfViewer/PdfPage/styles.js

@@ -21,6 +21,16 @@ export const Wrapper = styled.div `
     height: ${({ $height }) => $height}px;
     padding-top: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border-top: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+    border-radius: ${({ $isViewerLite }) => !$isViewerLite && 0};
+    box-shadow: ${({ $isViewerLite }) => !$isViewerLite && 'none'};
+    
+    &:last-child {
+      border-bottom: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+    }
+  }
 `;
 export const StyledTag = styled(Tag) `
   top: ${({ theme }) => theme.spacing(3)};

package/components/PdfViewer/styles.js

@@ -19,4 +19,8 @@ export const ScrollContainer = styled.div `
   overflow: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? 'unset' : 'auto'};
 
   height: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+  }
 `;

package/components/PdfViewer/useLogic/useLogic.js

@@ -1,13 +1,27 @@
 import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
+import { pageContentClassnames } from '../../PageContent/constants';
+import { useViewportType } from '../../useViewportType';
 import { useZoom } from '../hooks/useZoom';
 import { getPageHeightList } from '../utils';
 export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = useState(1);
+    const { isMobile } = useViewportType();
     const scrollContainerRef = useRef(null);
+    useEffect(() => {
+        const el = scrollRef?.current;
+        if (!el) {
+            return;
+        }
+        const isPageContentScroll = el.classList.contains(pageContentClassnames.content);
+        if (!isPageContentScroll) {
+            return;
+        }
+        el.classList.add(pageContentClassnames.withPdfViewer);
+    }, [scrollRef]);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = useZoom({
         scrollContainerRef,
-        enabledZoom,
+        enabledZoom: enabledZoom && !isMobile,
     });
     const [isError, setIsError] = useState(false);
     const [errorData, setErrorData] = useState();

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

@@ -3,5 +3,6 @@ export declare const pageContentClassnames: {
     content: string;
     contentHasHeader: string;
     animation: string;
+    withPdfViewer: string;
 };
 export declare const PAGE_CONTENT_ANIMATION = "white-flash";

package/node/components/PageContent/constants.js

@@ -7,5 +7,6 @@ exports.pageContentClassnames = {
     content: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content'),
     contentHasHeader: (0, createUIKitClassname_1.createUIKitClassname)('page-content__content_has-header'),
     animation: (0, createUIKitClassname_1.createUIKitClassname)('page-content_animation'),
+    withPdfViewer: (0, createUIKitClassname_1.createUIKitClassname)('page-content_with-pdf-viewer'),
 };
 exports.PAGE_CONTENT_ANIMATION = 'white-flash';

package/node/components/PageContent/styles.js

@@ -109,4 +109,17 @@ exports.Content = styled_1.styled.div `
       padding: ${({ theme }) => theme.spacing(4, 4, 3)};
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &&.${constants_2.pageContentClassnames.withPdfViewer} {
+      margin: 0;
+      padding-top: 0;
+      padding-right: 0;
+      padding-left: 0;
+
+      background-color: ${({ theme }) => theme.palette.background.body};
+      border: unset;
+      border-radius: 0;
+    }
+  }
 `;

package/node/components/PdfViewer/List/styles.js

@@ -6,4 +6,8 @@ exports.Wrapper = styled_1.styled.div `
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing(4)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    gap: 0;
+  }
 `;

package/node/components/PdfViewer/PdfDocument/styles.js

@@ -50,4 +50,9 @@ exports.StyledDocument = (0, styled_1.styled)(react_pdf_1.Document, {
       opacity: 1;
     }
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    margin: 0;
+    padding: 0;
+  }
 `;

package/node/components/PdfViewer/PdfPage/styles.js

@@ -24,6 +24,16 @@ exports.Wrapper = styled_1.styled.div `
     height: ${({ $height }) => $height}px;
     padding-top: 0;
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border-top: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+    border-radius: ${({ $isViewerLite }) => !$isViewerLite && 0};
+    box-shadow: ${({ $isViewerLite }) => !$isViewerLite && 'none'};
+    
+    &:last-child {
+      border-bottom: ${({ $isViewerLite, theme }) => ($isViewerLite ? 'unset' : `1px solid ${theme.palette.grey[300]}`)};
+    }
+  }
 `;
 exports.StyledTag = (0, styled_1.styled)(ControlBar_1.StyledTag) `
   top: ${({ theme }) => theme.spacing(3)};

package/node/components/PdfViewer/styles.js

@@ -22,4 +22,8 @@ exports.ScrollContainer = styled_1.styled.div `
   overflow: ${({ $isViewerLite, $enabledZoom }) => $isViewerLite || !$enabledZoom ? 'unset' : 'auto'};
 
   height: 100%;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    scrollbar-gutter: unset;
+  }
 `;

package/node/components/PdfViewer/useLogic/useLogic.js

@@ -3,14 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
+const constants_1 = require("../../PageContent/constants");
+const useViewportType_1 = require("../../useViewportType");
 const useZoom_1 = require("../hooks/useZoom");
 const utils_1 = require("../utils");
 const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = (0, react_1.useState)(1);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const scrollContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const el = scrollRef?.current;
+        if (!el) {
+            return;
+        }
+        const isPageContentScroll = el.classList.contains(constants_1.pageContentClassnames.content);
+        if (!isPageContentScroll) {
+            return;
+        }
+        el.classList.add(constants_1.pageContentClassnames.withPdfViewer);
+    }, [scrollRef]);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = (0, useZoom_1.useZoom)({
         scrollContainerRef,
-        enabledZoom,
+        enabledZoom: enabledZoom && !isMobile,
     });
     const [isError, setIsError] = (0, react_1.useState)(false);
     const [errorData, setErrorData] = (0, react_1.useState)();

package/package.json

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