@astral/ui 4.43.0 → 4.45.0

package/components/CheckableTag/styles.js

@@ -51,7 +51,7 @@ const getActiveBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
             success: theme.palette.green[700],
             warning: theme.palette.yellow[700],
             grey: theme.palette.grey[400],
-            default: theme.palette.grey[100],
+            default: theme.palette.grey[200],
         },
         light: {
             primary: theme.palette.primary[300],
@@ -59,7 +59,7 @@ const getActiveBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
             success: theme.palette.green[300],
             warning: theme.palette.yellow[300],
             grey: theme.palette.grey[300],
-            default: theme.palette.grey[100],
+            default: theme.palette.grey[200],
         },
     };
     if (variant && color) {
@@ -100,9 +100,10 @@ export const StyledTag = styled(Tag, {
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   user-select: none;
 
+  background-color: ${({ theme, color, variant }) => (variant === 'light' && color === 'grey') && theme.palette.grey[200]};
   ${({ $isChecked, disabled, theme }) => $isChecked &&
     `
-    background-color: ${disabled ? theme.palette.grey[100] : theme.palette.grey[900]};
+    background-color: ${disabled ? theme.palette.grey[200] : theme.palette.grey[900]};
   `}
   border: ${({ theme, variant, $isChecked, color, disabled }) => getBorder({ theme, variant, isChecked: $isChecked, color, disabled })};
 

package/components/ListItem/styles.js

@@ -3,7 +3,7 @@ import { styled } from '../styled';
 import { ListItemStates } from './constants';
 export const getBgColor = ({ selected, theme, }) => {
     if (selected) {
-        return theme.palette.grey[100];
+        return theme.palette.grey[200];
     }
     return 'transparent';
 };

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/components/theme/components/MuiListItemButton.js

@@ -5,7 +5,7 @@ export const MuiListItemButton = {
                 padding: theme.spacing(2, 3),
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],
-                    backgroundColor: theme.palette.grey[100],
+                    backgroundColor: theme.palette.grey[200],
                 },
                 '&:hover': {
                     backgroundColor: theme.palette.background.elementHover,

package/components/theme/palette/palette.js

@@ -46,7 +46,7 @@ export const getPalette = (palette) => {
             400: '#C7C7C7',
             300: '#D9D9D9',
             200: '#E2E2E2',
-            100: '#E9E9E9',
+            100: '#F5F5F5',
             // Необходимо mui при добавлении новых цветов компонентам
             main: '#1F1F1F',
             dark: '#0F0F0F',

package/node/components/CheckableTag/styles.js

@@ -54,7 +54,7 @@ const getActiveBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
             success: theme.palette.green[700],
             warning: theme.palette.yellow[700],
             grey: theme.palette.grey[400],
-            default: theme.palette.grey[100],
+            default: theme.palette.grey[200],
         },
         light: {
             primary: theme.palette.primary[300],
@@ -62,7 +62,7 @@ const getActiveBgColor = ({ theme, color, isChecked, variant, disabled, }) => {
             success: theme.palette.green[300],
             warning: theme.palette.yellow[300],
             grey: theme.palette.grey[300],
-            default: theme.palette.grey[100],
+            default: theme.palette.grey[200],
         },
     };
     if (variant && color) {
@@ -103,9 +103,10 @@ exports.StyledTag = (0, styled_1.styled)(Tag_1.Tag, {
   cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
   user-select: none;
 
+  background-color: ${({ theme, color, variant }) => (variant === 'light' && color === 'grey') && theme.palette.grey[200]};
   ${({ $isChecked, disabled, theme }) => $isChecked &&
     `
-    background-color: ${disabled ? theme.palette.grey[100] : theme.palette.grey[900]};
+    background-color: ${disabled ? theme.palette.grey[200] : theme.palette.grey[900]};
   `}
   border: ${({ theme, variant, $isChecked, color, disabled }) => getBorder({ theme, variant, isChecked: $isChecked, color, disabled })};
 

package/node/components/ListItem/styles.js

@@ -9,7 +9,7 @@ const styled_1 = require("../styled");
 const constants_1 = require("./constants");
 const getBgColor = ({ selected, theme, }) => {
     if (selected) {
-        return theme.palette.grey[100];
+        return theme.palette.grey[200];
     }
     return 'transparent';
 };

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/node/components/theme/components/MuiListItemButton.js

@@ -8,7 +8,7 @@ exports.MuiListItemButton = {
                 padding: theme.spacing(2, 3),
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],
-                    backgroundColor: theme.palette.grey[100],
+                    backgroundColor: theme.palette.grey[200],
                 },
                 '&:hover': {
                     backgroundColor: theme.palette.background.elementHover,

package/node/components/theme/palette/palette.js

@@ -49,7 +49,7 @@ const getPalette = (palette) => {
             400: '#C7C7C7',
             300: '#D9D9D9',
             200: '#E2E2E2',
-            100: '#E9E9E9',
+            100: '#F5F5F5',
             // Необходимо mui при добавлении новых цветов компонентам
             main: '#1F1F1F',
             dark: '#0F0F0F',

package/package.json

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