@astral/ui 4.35.1 → 4.36.1

package/components/PdfViewer/List/List.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
+import { pdfViewerClassnames } from '../constants';
 import { Wrapper } from './styles';
 export const List = ({ paginationRef, children, initialIndex }) => {
     useEffect(() => {
@@ -11,5 +12,5 @@ export const List = ({ paginationRef, children, initialIndex }) => {
             element.scrollIntoView({ behavior: 'auto', block: 'start' });
         }
     }, []);
-    return _jsx(Wrapper, { ref: paginationRef, children: children });
+    return (_jsx(Wrapper, { ref: paginationRef, className: pdfViewerClassnames.list, children: children }));
 };

package/components/PdfViewer/PdfDocument/PdfDocument.js

@@ -5,8 +5,9 @@ import { StyledDocument } from './styles';
 import { useLogic } from './useLogic';
 export const PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = useLogic(props);
-    const { enabledZoom, ...restProps } = props;
+    const { enabledZoom, isCentered, ...restProps } = props;
     return (_jsx(StyledDocument, { ...restProps, "$isLoading": isLoading, className: classNames(pdfViewerClassnames.document, {
             [pdfViewerClassnames.zoom]: enabledZoom,
+            [pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));
 };

package/components/PdfViewer/PdfDocument/styles.js

@@ -9,6 +9,19 @@ export const StyledDocument = styled(Document, {
   /* Сделано что бы скролл не перекрывал тень контейнера для страниц */
   margin: ${({ theme, $isLoading }) => $isLoading ? '0' : theme.microSpacing(1, 1, 2, 2)};
 
+  &.${pdfViewerClassnames.centered} {
+    height: 100%;
+
+    .${pdfViewerClassnames.list} {
+      height: 100%;
+    }
+
+    .${pdfViewerClassnames.page} {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
   .react-pdf__message--loading {
     height: 100%;
   }

package/components/PdfViewer/PdfDocument/types.d.ts

@@ -4,4 +4,5 @@ export type PDFDocumentProps = DocumentProps & {
     isLoading: boolean;
     isViewerLite?: boolean;
     enabledZoom: boolean;
+    isCentered?: boolean;
 };

package/components/PdfViewer/PdfViewer.js

@@ -17,8 +17,8 @@ pdfjs.GlobalWorkerOptions.workerSrc = PDFJS_WORKER_URL;
  * Компонент для просмотра PDF файлов
  */
 export const PdfViewer = (props) => {
-    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, } = useLogic(props);
-    return (_jsx(ContentState, { isError: isError, errorState: errorState, children: _jsxs(Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [_jsx(PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(PDFDocument, { ...documentProps, isLoading: isLoading, loading: _jsx(LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && (_jsx(List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => (_createElement(PDFPage, { ...pageProps, 
+    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, isCentered, } = useLogic(props);
+    return (_jsx(ContentState, { isError: isError, errorState: errorState, children: _jsxs(Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [_jsx(PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: _jsx(PDFDocument, { ...documentProps, isLoading: isLoading, isCentered: isCentered, loading: _jsx(LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && (_jsx(List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => (_createElement(PDFPage, { ...pageProps, 
                                     // biome-ignore lint/suspicious/noArrayIndexKey: Страницы статичны
                                     key: index, height: height * scale, pageNumber: index + 1, pageCount: pageCount, isViewerLite: isViewerLite, scale: scale, enabledZoom: enabledZoom }))) }, pageHeightList?.[0])) }) }) }), _jsx(ControlBar, { zoomOut: zoomOut, zoomIn: zoomIn, pageNumber: Number(initialIndex) + 1, buttonProps: {
                         isDisabledZoomIn: isDisabledZoomInButton,

package/components/PdfViewer/constants.d.ts

@@ -1,8 +1,10 @@
 export declare const pdfViewerClassnames: {
+    list: string;
     document: string;
     page: string;
     animation: string;
     zoom: string;
+    centered: string;
 };
 export declare const PDFJS_WORKER_URL = "https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs";
 export declare const TEXT_LAYER_CSS_URL = "https://frontend-static.astral.ru/libs/react-pdf/9.2.1/text-layer.min.css";

package/components/PdfViewer/constants.js

@@ -1,9 +1,11 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const pdfViewerClassnames = {
+    list: createUIKitClassname('pdf-viewer__list'),
     document: createUIKitClassname('pdf-viewer__document'),
     page: createUIKitClassname('pdf-viewer__page'),
     animation: createUIKitClassname('pdf-viewer_animation'),
     zoom: createUIKitClassname('pdf-viewer__zoom_enabled'),
+    centered: createUIKitClassname('pdf-viewer_centered'),
 };
 // Worker и CSS загружаются из сервиса статики https://git.astralnalog.ru/frontend.shared/static-files
 export const PDFJS_WORKER_URL = 'https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs';

package/components/PdfViewer/types.d.ts

@@ -59,6 +59,10 @@ export type PdfViewerProps = {
      * Отображение страниц в полную высоту
      */
     isFullHeight?: boolean;
+    /**
+     * Центрирование содержимого контейнера
+     */
+    isCentered?: boolean;
     /**
      * Диапазон индексов страниц, которые необходимо отобразить
      */

package/components/PdfViewer/useLogic/useLogic.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type PdfViewerOnLoadSuccessProps, type PdfViewerProps } from '../types';
-export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
+export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
     documentProps: {
         file: string | Blob | null | undefined;
         options: {
@@ -42,4 +42,5 @@ export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight,
     shouldAnimateZoom: boolean;
     loadingPlaceholderTitle: string | undefined;
     enabledZoom: boolean;
+    isCentered: boolean | undefined;
 };

package/components/PdfViewer/useLogic/useLogic.js

@@ -2,7 +2,7 @@ import { useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ConfigContext } from '../../ConfigProvider';
 import { useZoom } from '../hooks/useZoom';
 import { getPageHeightList } from '../utils';
-export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
+export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = useState(1);
     const scrollContainerRef = useRef(null);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = useZoom({
@@ -100,5 +100,6 @@ export const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderP
         shouldAnimateZoom,
         loadingPlaceholderTitle,
         enabledZoom,
+        isCentered,
     };
 };

package/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -13,7 +13,7 @@ export const StyledDialogContent = styled(DialogContent, {
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -25,5 +25,5 @@ export const OptionsModal = (props) => {
         }
         return _jsx(TreeList, { ...treeProps, ...treeListProps });
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeAutocomplete/OptionsModal/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("../../styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: import("../../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>, {}>;
+export {};

package/components/TreeAutocomplete/OptionsModal/styles.js

@@ -1,13 +1,20 @@
+import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
 import { styled } from '../../styled';
-export const StyledDialogContent = styled(DialogContent) `
+export const StyledDialogContent = styled(DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 500px;
-  height: 500px;
+  width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 export const TreeListWrapper = styled.div `
   overflow: auto;

package/components/TreeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -1,15 +1,17 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeListProps } from '../../../Tree';
 import { type OptionsModalProps } from '../types';
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeListProps: TreeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: OptionsModalProps) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: OptionsModalProps) => UseLogicResult;
 export {};

package/components/TreeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
 import { findInTree } from './utils';
-export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
     useEffect(() => {
@@ -47,6 +47,7 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -13,7 +13,7 @@ export const StyledDialogContent = styled(DialogContent, {
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -25,5 +25,5 @@ export const OptionsModal = (props) => {
         }
         return (_jsx(TreeLikeList, { isConfirmChildrenSelection: isConfirmChildrenSelection, ...treeProps, ...treeLikeListProps }));
     };
-    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return (_jsxs(Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [_jsxs(StyledDialogContent, { "$size": modalProps.size, children: [_jsx(SearchField, { fullWidth: true, ...searchFieldProps }), _jsx(Paper, { variant: "outlined", children: _jsx(TreeListWrapper, { children: renderComponent() }) })] }), _jsxs(DialogActions, { children: [_jsx(Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), _jsx(Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };

package/components/TreeLikeAutocomplete/OptionsModal/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("../../styled").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: import("../../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>, {}>;
+export {};

package/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -1,13 +1,20 @@
+import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
 import { styled } from '../../styled';
-export const StyledDialogContent = styled(DialogContent) `
+export const StyledDialogContent = styled(DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 100%;
-  height: 500px;
+  width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 export const TreeListWrapper = styled.div `
   overflow: auto;

package/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeLikeListProps } from '../../../TreeLikeList';
 import { type OptionsModalProps } from '../types';
@@ -7,10 +7,12 @@ type UseLogicParams = OptionsModalProps;
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: UseLogicParams) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

package/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
 import { findInTree } from './utils';
-export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = useState(initialValue);
     const [searchValue, setSearchValue] = useState();
     useEffect(() => {
@@ -47,6 +47,7 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ file, fileUrl, isHidePersonalData, }: UseLogic
     pdfViewerProps: {
         isViewerLite: boolean;
         isFullHeight: boolean;
+        isCentered: boolean;
         file: string | File | null | undefined;
         scrollRef: import("react").RefObject<null>;
         renderPageRange: {

package/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.js

@@ -28,6 +28,7 @@ export const useLogic = ({ file, fileUrl, isHidePersonalData, }) => {
         pdfViewerProps: {
             isViewerLite: true,
             isFullHeight: true,
+            isCentered: true,
             file: file || fileUrl,
             scrollRef,
             renderPageRange: { end: 0 },

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

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.List = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const constants_1 = require("../constants");
 const styles_1 = require("./styles");
 const List = ({ paginationRef, children, initialIndex }) => {
     (0, react_1.useEffect)(() => {
@@ -14,6 +15,6 @@ const List = ({ paginationRef, children, initialIndex }) => {
             element.scrollIntoView({ behavior: 'auto', block: 'start' });
         }
     }, []);
-    return (0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: paginationRef, children: children });
+    return ((0, jsx_runtime_1.jsx)(styles_1.Wrapper, { ref: paginationRef, className: constants_1.pdfViewerClassnames.list, children: children }));
 };
 exports.List = List;

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

@@ -8,9 +8,10 @@ const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const PDFDocument = (props) => {
     const { documentRef, onAnimationEnd, isLoading } = (0, useLogic_1.useLogic)(props);
-    const { enabledZoom, ...restProps } = props;
+    const { enabledZoom, isCentered, ...restProps } = props;
     return ((0, jsx_runtime_1.jsx)(styles_1.StyledDocument, { ...restProps, "$isLoading": isLoading, className: (0, classNames_1.classNames)(constants_1.pdfViewerClassnames.document, {
             [constants_1.pdfViewerClassnames.zoom]: enabledZoom,
+            [constants_1.pdfViewerClassnames.centered]: isCentered,
         }), inputRef: documentRef, onAnimationEnd: onAnimationEnd }));
 };
 exports.PDFDocument = PDFDocument;

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

@@ -12,6 +12,19 @@ exports.StyledDocument = (0, styled_1.styled)(react_pdf_1.Document, {
   /* Сделано что бы скролл не перекрывал тень контейнера для страниц */
   margin: ${({ theme, $isLoading }) => $isLoading ? '0' : theme.microSpacing(1, 1, 2, 2)};
 
+  &.${constants_1.pdfViewerClassnames.centered} {
+    height: 100%;
+
+    .${constants_1.pdfViewerClassnames.list} {
+      height: 100%;
+    }
+
+    .${constants_1.pdfViewerClassnames.page} {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+  }
+
   .react-pdf__message--loading {
     height: 100%;
   }

package/node/components/PdfViewer/PdfDocument/types.d.ts

@@ -4,4 +4,5 @@ export type PDFDocumentProps = DocumentProps & {
     isLoading: boolean;
     isViewerLite?: boolean;
     enabledZoom: boolean;
+    isCentered?: boolean;
 };

package/node/components/PdfViewer/PdfViewer.js

@@ -20,8 +20,8 @@ react_pdf_1.pdfjs.GlobalWorkerOptions.workerSrc = constants_1.PDFJS_WORKER_URL;
  * Компонент для просмотра PDF файлов
  */
 const PdfViewer = (props) => {
-    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isError: isError, errorState: errorState, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [(0, jsx_runtime_1.jsx)(styles_1.PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(styles_1.ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(PdfDocument_1.PDFDocument, { ...documentProps, isLoading: isLoading, loading: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && ((0, jsx_runtime_1.jsx)(List_1.List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => ((0, react_1.createElement)(PdfPage_1.PDFPage, { ...pageProps, 
+    const { documentProps, pageProps, pageCount, pageHeightList, isError, errorState, paginationRef, isLoading, initialIndex, isRenderList, isViewerLite, scale, zoomOut, zoomIn, isDisabledZoomOutButton, isDisabledZoomInButton, scrollContainerRef, loadingPlaceholderTitle, enabledZoom, isCentered, } = (0, useLogic_1.useLogic)(props);
+    return ((0, jsx_runtime_1.jsx)(ContentState_1.ContentState, { isError: isError, errorState: errorState, children: (0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: [(0, jsx_runtime_1.jsx)(styles_1.PDFViewerContainer, { "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(styles_1.ScrollContainer, { ref: scrollContainerRef, "$isViewerLite": isViewerLite, "$enabledZoom": enabledZoom, children: (0, jsx_runtime_1.jsx)(PdfDocument_1.PDFDocument, { ...documentProps, isLoading: isLoading, isCentered: isCentered, loading: (0, jsx_runtime_1.jsx)(LoadingPlaceholder_1.LoadingPlaceholder, { title: loadingPlaceholderTitle }), isViewerLite: isViewerLite, enabledZoom: enabledZoom, children: isRenderList && ((0, jsx_runtime_1.jsx)(List_1.List, { paginationRef: paginationRef, initialIndex: initialIndex, children: pageHeightList?.map((height, index) => ((0, react_1.createElement)(PdfPage_1.PDFPage, { ...pageProps, 
                                     // biome-ignore lint/suspicious/noArrayIndexKey: Страницы статичны
                                     key: index, height: height * scale, pageNumber: index + 1, pageCount: pageCount, isViewerLite: isViewerLite, scale: scale, enabledZoom: enabledZoom }))) }, pageHeightList?.[0])) }) }) }), (0, jsx_runtime_1.jsx)(ControlBar_1.ControlBar, { zoomOut: zoomOut, zoomIn: zoomIn, pageNumber: Number(initialIndex) + 1, buttonProps: {
                         isDisabledZoomIn: isDisabledZoomInButton,

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

@@ -1,8 +1,10 @@
 export declare const pdfViewerClassnames: {
+    list: string;
     document: string;
     page: string;
     animation: string;
     zoom: string;
+    centered: string;
 };
 export declare const PDFJS_WORKER_URL = "https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs";
 export declare const TEXT_LAYER_CSS_URL = "https://frontend-static.astral.ru/libs/react-pdf/9.2.1/text-layer.min.css";

package/node/components/PdfViewer/constants.js

@@ -3,10 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TRACKPAD_DELTA_Y_THRESHOLD = exports.ZOOM_INTENSITY_TRACKPAD = exports.ZOOM_INTENSITY_MOUSE = exports.ZOOM_STEP_OUT = exports.ZOOM_STEP_IN = exports.ZOOM_MAX = exports.ZOOM_MIN = exports.RESERVED_TOP_SPACE = exports.RESERVED_CONTROL_BAR_SPACE = exports.PDF_VIEWER_ANIMATION = exports.ANNOTATION_LAYER_CSS_URL = exports.TEXT_LAYER_CSS_URL = exports.PDFJS_WORKER_URL = exports.pdfViewerClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.pdfViewerClassnames = {
+    list: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__list'),
     document: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__document'),
     page: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__page'),
     animation: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer_animation'),
     zoom: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer__zoom_enabled'),
+    centered: (0, createUIKitClassname_1.createUIKitClassname)('pdf-viewer_centered'),
 };
 // Worker и CSS загружаются из сервиса статики https://git.astralnalog.ru/frontend.shared/static-files
 exports.PDFJS_WORKER_URL = 'https://frontend-static.astral.ru/libs/pdfjs-dist/4.8.69/pdf.worker.min.mjs';

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

@@ -59,6 +59,10 @@ export type PdfViewerProps = {
      * Отображение страниц в полную высоту
      */
     isFullHeight?: boolean;
+    /**
+     * Центрирование содержимого контейнера
+     */
+    isCentered?: boolean;
     /**
      * Диапазон индексов страниц, которые необходимо отобразить
      */

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { type PdfViewerOnLoadSuccessProps, type PdfViewerProps } from '../types';
-export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
+export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom, options, ...props }: PdfViewerProps) => {
     documentProps: {
         file: string | Blob | null | undefined;
         options: {
@@ -42,4 +42,5 @@ export declare const useLogic: ({ file, scrollRef, paginationRef, isFullHeight,
     shouldAnimateZoom: boolean;
     loadingPlaceholderTitle: string | undefined;
     enabledZoom: boolean;
+    isCentered: boolean | undefined;
 };

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

@@ -5,7 +5,7 @@ const react_1 = require("react");
 const ConfigProvider_1 = require("../../ConfigProvider");
 const useZoom_1 = require("../hooks/useZoom");
 const utils_1 = require("../utils");
-const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
+const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, isCentered, renderPageRange, isHidePersonalData, isViewerLite, enabledZoom = true, options, ...props }) => {
     const [containerWidth, setContainerWidth] = (0, react_1.useState)(1);
     const scrollContainerRef = (0, react_1.useRef)(null);
     const { zoomOut, scale, zoomIn, shouldAnimateZoom } = (0, useZoom_1.useZoom)({
@@ -103,6 +103,7 @@ const useLogic = ({ file, scrollRef, paginationRef, isFullHeight, renderPageRang
         shouldAnimateZoom,
         loadingPlaceholderTitle,
         enabledZoom,
+        isCentered,
     };
 };
 exports.useLogic = useLogic;

package/node/components/TreeAsyncAutocomplete/OptionsModal/styles.js

@@ -16,7 +16,7 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/node/components/TreeAutocomplete/OptionsModal/OptionsModal.js

@@ -28,6 +28,6 @@ const OptionsModal = (props) => {
         }
         return (0, jsx_runtime_1.jsx)(Tree_1.TreeList, { ...treeProps, ...treeListProps });
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

package/node/components/TreeAutocomplete/OptionsModal/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: 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>, {}>;
+export {};

package/node/components/TreeAutocomplete/OptionsModal/styles.js

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
 const styled_1 = require("../../styled");
-exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent) `
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 500px;
-  height: 500px;
+  width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;

package/node/components/TreeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -1,15 +1,17 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeListProps } from '../../../Tree';
 import { type OptionsModalProps } from '../types';
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeListProps: TreeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: OptionsModalProps) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: OptionsModalProps) => UseLogicResult;
 export {};

package/node/components/TreeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
 const utils_1 = require("./utils");
-const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -50,6 +50,7 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/node/components/TreeLikeAsyncAutocomplete/OptionsModal/styles.js

@@ -16,7 +16,7 @@ exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent
   gap: ${({ theme }) => theme.spacing(4)};
 
   width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
-  height: ${({ $size }) => ($size === 'md' ? '500px' : `calc(${Dialog_1.DIALOG_SIZES[$size].minWidth} - 50px)`)};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;

package/node/components/TreeLikeAutocomplete/OptionsModal/OptionsModal.js

@@ -28,6 +28,6 @@ const OptionsModal = (props) => {
         }
         return ((0, jsx_runtime_1.jsx)(TreeLikeList_1.TreeLikeList, { isConfirmChildrenSelection: isConfirmChildrenSelection, ...treeProps, ...treeLikeListProps }));
     };
-    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(Dialog_1.Dialog, { ...externalDialogProps, disableRestoreFocus: true, open: isOpen, ...modalProps, children: [(0, jsx_runtime_1.jsxs)(styles_1.StyledDialogContent, { "$size": modalProps.size, children: [(0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { fullWidth: true, ...searchFieldProps }), (0, jsx_runtime_1.jsx)(Paper_1.Paper, { variant: "outlined", children: (0, jsx_runtime_1.jsx)(styles_1.TreeListWrapper, { children: renderComponent() }) })] }), (0, jsx_runtime_1.jsxs)(DialogActions_1.DialogActions, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "text", ...cancelButtonProps, children: "\u041E\u0442\u043C\u0435\u043D\u0430" }), (0, jsx_runtime_1.jsx)(Button_1.Button, { ...confirmButtonProps, children: "\u0412\u044B\u0431\u0440\u0430\u0442\u044C" })] })] }));
 };
 exports.OptionsModal = OptionsModal;

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.d.ts

@@ -1,8 +1,12 @@
 /// <reference types="react" />
+type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export declare const StyledDialogContent: import("@emotion/styled/dist/declarations/src/types").StyledComponent<import("../../DialogContent").DialogContentProps & {
     theme?: import("@emotion/react").Theme | undefined;
+} & {
+    $size: Size;
 }, {}, {}>;
 export declare const TreeListWrapper: 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>, {}>;
+export {};

package/node/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -1,16 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TreeListWrapper = exports.StyledDialogContent = void 0;
+const Dialog_1 = require("../../Dialog");
 const DialogContent_1 = require("../../DialogContent");
 const styled_1 = require("../../styled");
-exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent) `
+exports.StyledDialogContent = (0, styled_1.styled)(DialogContent_1.DialogContent, {
+    shouldForwardProp: (prop) => !['$size'].includes(prop),
+}) `
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: max-content 1fr;
   gap: ${({ theme }) => theme.spacing(4)};
 
-  width: 100%;
-  height: 500px;
+  width: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  height: ${({ $size }) => Dialog_1.DIALOG_SIZES[$size].minWidth};
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    width: auto;
+  }
 `;
 exports.TreeListWrapper = styled_1.styled.div `
   overflow: auto;

package/node/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -1,5 +1,5 @@
 import { type ButtonProps } from '../../../Button';
-import { type DialogProps } from '../../../Dialog';
+import { type DialogProps, type DialogSize } from '../../../Dialog';
 import { type SearchFieldProps } from '../../../SearchField';
 import { type TreeLikeListProps } from '../../../TreeLikeList';
 import { type OptionsModalProps } from '../types';
@@ -7,10 +7,12 @@ type UseLogicParams = OptionsModalProps;
 type UseLogicResult = {
     isNoResult: boolean;
     searchFieldProps: SearchFieldProps;
-    modalProps: Partial<DialogProps>;
+    modalProps: Partial<DialogProps> & {
+        size: DialogSize;
+    };
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
 };
-export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }: UseLogicParams) => UseLogicResult;
+export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

package/node/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -4,7 +4,7 @@ exports.useLogic = void 0;
 const react_1 = require("react");
 const array_1 = require("../../../utils/array");
 const utils_1 = require("./utils");
-const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, }) => {
+const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = (0, react_1.useState)(initialValue);
     const [searchValue, setSearchValue] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
@@ -50,6 +50,7 @@ const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, fi
         isNoResult,
         modalProps: {
             onClose: handleClose,
+            size,
         },
         searchFieldProps: {
             value: searchValue,

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ export declare const useLogic: ({ file, fileUrl, isHidePersonalData, }: UseLogic
     pdfViewerProps: {
         isViewerLite: boolean;
         isFullHeight: boolean;
+        isCentered: boolean;
         file: string | File | null | undefined;
         scrollRef: import("react").RefObject<null>;
         renderPageRange: {

package/node/components/fileUploading/PreviewFileUploaderFile/FilePreview/Preview/useLogic/useLogic.js

@@ -31,6 +31,7 @@ const useLogic = ({ file, fileUrl, isHidePersonalData, }) => {
         pdfViewerProps: {
             isViewerLite: true,
             isFullHeight: true,
+            isCentered: true,
             file: file || fileUrl,
             scrollRef,
             renderPageRange: { end: 0 },

package/package.json

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