@astral/ui 4.42.0 → 4.43.0

package/components/BottomDrawer/BottomDrawer.js

@@ -9,5 +9,5 @@ export const BottomDrawer = ({ title, drawerHeaderHeight = DEFAULT_HEADER_HEIGHT
             onClose(event, 'escapeKeyDown');
         }
     };
-    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "medium", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
+    return (_jsxs(StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [_jsxs(Header, { drawerHeaderHeight: drawerHeaderHeight, className: bottomDrawerClassnames.header, children: [_jsx(HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, _jsx(IconButton, { variant: "text", onClick: handleClose, size: "medium", children: _jsx(CrossOutlineMd, {}) })] }), _jsx(Body, { className: bottomDrawerClassnames.content, children: children })] }));
 };

package/components/BottomDrawer/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const OFFSET_TOP_SCREEN = "16px";
 export declare const DEFAULT_HEADER_HEIGHT = 56;
 export declare const bottomDrawerClassnames: {
+    header: string;
     content: string;
 };

package/components/BottomDrawer/constants.js

@@ -2,5 +2,6 @@ import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const OFFSET_TOP_SCREEN = '16px';
 export const DEFAULT_HEADER_HEIGHT = 56;
 export const bottomDrawerClassnames = {
+    header: createUIKitClassname('bottom-drawer__header'),
     content: createUIKitClassname('bottom-drawer__content'),
 };

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -4,7 +4,7 @@ type Params = {
     /**
      * Изменение value для DatePicker
      * */
-    onChangeValue?: (date?: Date | null) => void;
+    onChangeValue?: (date?: Date | null, maskedValue?: string) => void;
 };
 type Returned = {
     /**

package/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -10,15 +10,16 @@ export const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         setMaskedValue(value);
         // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
         if (!value) {
-            onChangeValue?.(null);
+            onChangeValue?.(null, value);
         }
         else {
-            onChangeValue?.(parseDate(value, mask));
+            onChangeValue?.(parseDate(value, mask), value);
         }
     };
     const handleChangeMaskedDate = (date) => {
-        setMaskedValue(formatDate(date, mask));
-        onChangeValue?.(date);
+        const formatted = formatDate(date, mask);
+        setMaskedValue(formatted);
+        onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
     useEffect(() => {

package/components/DateRangePicker/useLogic/useLogic.js

@@ -3,7 +3,7 @@ import { DEFAULT_DATE_MASK, DEFAULT_MAX_DATE, DEFAULT_MIN_DATE, useMaskedValue,
 import { useForwardedRef } from '../../useForwardedRef';
 import { usePopover } from '../../usePopover';
 import { useBaseRangeDates } from './hooks';
-import { getBoundaryDate } from './utils';
+import { getBoundaryDate, isMaskedDateSyntacticallyComplete } from './utils';
 export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_MAX_DATE, mask = DEFAULT_DATE_MASK, onChange, onOpen, onClose, onBlur, }, forwardedRef) => {
     const ref = useForwardedRef(forwardedRef);
     const startInputRef = useRef(null);
@@ -39,15 +39,27 @@ export const useLogic = ({ value, minDate = DEFAULT_MIN_DATE, maxDate = DEFAULT_
         selectedStartDate: selectedStartBaseDate,
         selectedEndDate: selectedEndBaseDate,
     });
-    const handleChangeStartDate = (startDateValue) => {
-        if (startDateValue && value?.end && startDateValue > value?.end) {
+    const handleChangeStartDate = (startDateValue, startMaskString) => {
+        const isStartComplete = startDateValue != null &&
+            startMaskString != null &&
+            isMaskedDateSyntacticallyComplete(startMaskString, mask);
+        if (isStartComplete &&
+            value?.end &&
+            startDateValue &&
+            startDateValue > value.end) {
             onChange?.({ start: startDateValue, end: undefined });
             return;
         }
         onChange?.({ ...value, start: startDateValue });
     };
-    const handleChangeEndDate = (endDateValue) => {
-        if (endDateValue && value?.start && endDateValue < value?.start) {
+    const handleChangeEndDate = (endDateValue, endMaskString) => {
+        const isEndComplete = endDateValue != null &&
+            endMaskString != null &&
+            isMaskedDateSyntacticallyComplete(endMaskString, mask);
+        if (isEndComplete &&
+            value?.start &&
+            endDateValue &&
+            endDateValue < value.start) {
             onChange?.({ start: undefined, end: endDateValue });
             return;
         }

package/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './getBoundaryDate';
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/index.js

@@ -1 +1,2 @@
 export * from './getBoundaryDate';
+export * from './isMaskedDateSyntacticallyComplete';

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/index.d.ts

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

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/index.js

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

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -0,0 +1,5 @@
+import { type DateMask } from '../../../../utils/date/format';
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+export declare const isMaskedDateSyntacticallyComplete: (value: string, mask: DateMask, separator?: string) => boolean;

package/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.js

@@ -0,0 +1,17 @@
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+export const isMaskedDateSyntacticallyComplete = (value, mask, separator = '.') => {
+    if (!value) {
+        return false;
+    }
+    const maskParts = mask.split(separator);
+    const valueParts = value.split(separator);
+    if (maskParts.length !== valueParts.length) {
+        return false;
+    }
+    return maskParts.every((maskPart, index) => {
+        const part = valueParts[index];
+        return (part.length === maskPart.length && part.length > 0 && /^\d+$/.test(part));
+    });
+};

package/components/SideDialog/SideDialog.js

@@ -1,6 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SideDialogTitle } from '../SideDialogTitle';
-import { StyledDrawer } from './styles';
+import { useViewportType } from '../useViewportType';
+import { StyledBottomDrawer, StyledDrawer } from './styles';
 export const SideDialog = ({ children, title, onClose, open, size = 'sm', ...props }) => {
+    const { isMobile } = useViewportType();
+    if (isMobile) {
+        return (_jsx(StyledBottomDrawer, { onClose: onClose, title: title, open: open, ...props, children: children }));
+    }
     return (_jsxs(StyledDrawer, { "$size": size, anchor: "right", open: open, onClose: onClose, ...props, children: [title && _jsx(SideDialogTitle, { onClose: onClose, children: title }), children] }));
 };

package/components/SideDialog/styles.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DrawerProps } from '@mui/material/Drawer';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -6,4 +7,11 @@ export declare const StyledDrawer: import("../styled").StyledComponent<DrawerPro
 } & {
     $size: SideDialogSize;
 } & WithoutEmotionSpecific<DrawerProps>, {}, {}>;
+export declare const StyledBottomDrawer: import("../styled").StyledComponent<{
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    drawerHeaderHeight?: number | undefined;
+    headerContent?: import("react").ReactNode;
+} & WithoutEmotionSpecific<Omit<DrawerProps, "title" | "anchor" | "variant">> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

package/components/SideDialog/styles.js

@@ -1,6 +1,8 @@
 import { dialogContentClasses } from '@mui/material/DialogContent';
 import { dialogTitleClasses } from '@mui/material/DialogTitle';
 import Drawer, { drawerClasses } from '@mui/material/Drawer';
+import { BottomDrawer, bottomDrawerClassnames } from '../BottomDrawer';
+import { sideDialogHeaderClassnames } from '../SideDialogHeader/constants';
 import { styled } from '../styled';
 import { SIDE_DIALOG_SCREEN_OFFSET, SIZES } from './constants';
 const getSize = (size) => {
@@ -31,3 +33,14 @@ export const StyledDrawer = styled(Drawer, {
     padding-top: ${({ theme }) => theme.spacing(4)};
   }
 `;
+export const StyledBottomDrawer = styled(BottomDrawer) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(.${sideDialogHeaderClassnames.root}) {
+      & .${bottomDrawerClassnames.header} {
+        display: none;
+      }
+    }
+  }
+`;

package/components/SideDialogActions/styles.js

@@ -17,4 +17,11 @@ export const StyledDialogActions = styled(DialogActions) `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    bottom: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.paper};
+  }
 `;

package/components/SideDialogHeader/SideDialogHeader.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sideDialogHeaderClassnames } from './constants';
 import { StyledDialogHeader } from './styles';
 export const SideDialogHeader = (props) => {
-    return _jsx(StyledDialogHeader, { ...props });
+    return (_jsx(StyledDialogHeader, { className: sideDialogHeaderClassnames.root, ...props }));
 };

package/components/SideDialogHeader/constants.d.ts

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

package/components/SideDialogHeader/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const sideDialogHeaderClassnames = {
+    root: createUIKitClassname('side-dialog__header'),
+};

package/components/SideDialogHeader/styles.js

@@ -17,4 +17,12 @@ export const StyledDialogHeader = styled(DialogHeader) `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: +1;
+    top: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.paper};
+  }
 `;

package/node/components/BottomDrawer/BottomDrawer.js

@@ -12,6 +12,6 @@ const BottomDrawer = ({ title, drawerHeaderHeight = constants_1.DEFAULT_HEADER_H
             onClose(event, 'escapeKeyDown');
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "medium", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { ...props, anchor: "bottom", onClose: onClose, children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { drawerHeaderHeight: drawerHeaderHeight, className: constants_1.bottomDrawerClassnames.header, children: [(0, jsx_runtime_1.jsx)(styles_1.HeaderTitle, { variant: "h6", noWrap: true, children: title }), headerContent, (0, jsx_runtime_1.jsx)(IconButton_1.IconButton, { variant: "text", onClick: handleClose, size: "medium", children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })] }), (0, jsx_runtime_1.jsx)(styles_1.Body, { className: constants_1.bottomDrawerClassnames.content, children: children })] }));
 };
 exports.BottomDrawer = BottomDrawer;

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

@@ -1,5 +1,6 @@
 export declare const OFFSET_TOP_SCREEN = "16px";
 export declare const DEFAULT_HEADER_HEIGHT = 56;
 export declare const bottomDrawerClassnames: {
+    header: string;
     content: string;
 };

package/node/components/BottomDrawer/constants.js

@@ -5,5 +5,6 @@ const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.OFFSET_TOP_SCREEN = '16px';
 exports.DEFAULT_HEADER_HEIGHT = 56;
 exports.bottomDrawerClassnames = {
+    header: (0, createUIKitClassname_1.createUIKitClassname)('bottom-drawer__header'),
     content: (0, createUIKitClassname_1.createUIKitClassname)('bottom-drawer__content'),
 };

package/node/components/DatePicker/hooks/useMaskedValue/useMaskedValue.d.ts

@@ -4,7 +4,7 @@ type Params = {
     /**
      * Изменение value для DatePicker
      * */
-    onChangeValue?: (date?: Date | null) => void;
+    onChangeValue?: (date?: Date | null, maskedValue?: string) => void;
 };
 type Returned = {
     /**

package/node/components/DatePicker/hooks/useMaskedValue/useMaskedValue.js

@@ -13,15 +13,16 @@ const useMaskedValue = ({ currentValue, mask, onChangeValue, }) => {
         setMaskedValue(value);
         // При отсутствии value указываем null, так как если задать undefined, то отобразится defaultValue при наличии
         if (!value) {
-            onChangeValue?.(null);
+            onChangeValue?.(null, value);
         }
         else {
-            onChangeValue?.((0, date_1.parseDate)(value, mask));
+            onChangeValue?.((0, date_1.parseDate)(value, mask), value);
         }
     };
     const handleChangeMaskedDate = (date) => {
-        setMaskedValue((0, date_1.formatDate)(date, mask));
-        onChangeValue?.(date);
+        const formatted = (0, date_1.formatDate)(date, mask);
+        setMaskedValue(formatted);
+        onChangeValue?.(date, formatted);
     };
     // здесь происходит реакция на изменение value из вне (управляемый компонент)
     (0, react_1.useEffect)(() => {

package/node/components/DateRangePicker/useLogic/useLogic.js

@@ -42,15 +42,27 @@ const useLogic = ({ value, minDate = DatePicker_1.DEFAULT_MIN_DATE, maxDate = Da
         selectedStartDate: selectedStartBaseDate,
         selectedEndDate: selectedEndBaseDate,
     });
-    const handleChangeStartDate = (startDateValue) => {
-        if (startDateValue && value?.end && startDateValue > value?.end) {
+    const handleChangeStartDate = (startDateValue, startMaskString) => {
+        const isStartComplete = startDateValue != null &&
+            startMaskString != null &&
+            (0, utils_1.isMaskedDateSyntacticallyComplete)(startMaskString, mask);
+        if (isStartComplete &&
+            value?.end &&
+            startDateValue &&
+            startDateValue > value.end) {
             onChange?.({ start: startDateValue, end: undefined });
             return;
         }
         onChange?.({ ...value, start: startDateValue });
     };
-    const handleChangeEndDate = (endDateValue) => {
-        if (endDateValue && value?.start && endDateValue < value?.start) {
+    const handleChangeEndDate = (endDateValue, endMaskString) => {
+        const isEndComplete = endDateValue != null &&
+            endMaskString != null &&
+            (0, utils_1.isMaskedDateSyntacticallyComplete)(endMaskString, mask);
+        if (isEndComplete &&
+            value?.start &&
+            endDateValue &&
+            endDateValue < value.start) {
             onChange?.({ start: undefined, end: endDateValue });
             return;
         }

package/node/components/DateRangePicker/useLogic/utils/index.d.ts

@@ -1 +1,2 @@
 export * from './getBoundaryDate';
+export * from './isMaskedDateSyntacticallyComplete';

package/node/components/DateRangePicker/useLogic/utils/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./getBoundaryDate"), exports);
+__exportStar(require("./isMaskedDateSyntacticallyComplete"), exports);

package/node/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/index.d.ts

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

package/node/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/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("./isMaskedDateSyntacticallyComplete"), exports);

package/node/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.d.ts

@@ -0,0 +1,5 @@
+import { type DateMask } from '../../../../utils/date/format';
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+export declare const isMaskedDateSyntacticallyComplete: (value: string, mask: DateMask, separator?: string) => boolean;

package/node/components/DateRangePicker/useLogic/utils/isMaskedDateSyntacticallyComplete/isMaskedDateSyntacticallyComplete.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMaskedDateSyntacticallyComplete = void 0;
+/**
+ * Все ли части строки по маске заполнены цифрами полностью (без промежуточных состояний IMask).
+ */
+const isMaskedDateSyntacticallyComplete = (value, mask, separator = '.') => {
+    if (!value) {
+        return false;
+    }
+    const maskParts = mask.split(separator);
+    const valueParts = value.split(separator);
+    if (maskParts.length !== valueParts.length) {
+        return false;
+    }
+    return maskParts.every((maskPart, index) => {
+        const part = valueParts[index];
+        return (part.length === maskPart.length && part.length > 0 && /^\d+$/.test(part));
+    });
+};
+exports.isMaskedDateSyntacticallyComplete = isMaskedDateSyntacticallyComplete;

package/node/components/SideDialog/SideDialog.js

@@ -3,8 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideDialog = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const SideDialogTitle_1 = require("../SideDialogTitle");
+const useViewportType_1 = require("../useViewportType");
 const styles_1 = require("./styles");
 const SideDialog = ({ children, title, onClose, open, size = 'sm', ...props }) => {
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
+    if (isMobile) {
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledBottomDrawer, { onClose: onClose, title: title, open: open, ...props, children: children }));
+    }
     return ((0, jsx_runtime_1.jsxs)(styles_1.StyledDrawer, { "$size": size, anchor: "right", open: open, onClose: onClose, ...props, children: [title && (0, jsx_runtime_1.jsx)(SideDialogTitle_1.SideDialogTitle, { onClose: onClose, children: title }), children] }));
 };
 exports.SideDialog = SideDialog;

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { DrawerProps } from '@mui/material/Drawer';
 import { type WithoutEmotionSpecific } from '../types/WithoutEmotionSpecific';
 type SideDialogSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -6,4 +7,11 @@ export declare const StyledDrawer: import("@emotion/styled/dist/declarations/src
 } & {
     $size: SideDialogSize;
 } & WithoutEmotionSpecific<DrawerProps>, {}, {}>;
+export declare const StyledBottomDrawer: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    title?: string | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>[] | undefined;
+    drawerHeaderHeight?: number | undefined;
+    headerContent?: import("react").ReactNode;
+} & WithoutEmotionSpecific<Omit<DrawerProps, "title" | "anchor" | "variant">> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

package/node/components/SideDialog/styles.js

@@ -23,14 +23,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledDrawer = void 0;
+exports.StyledBottomDrawer = exports.StyledDrawer = void 0;
 const DialogContent_1 = require("@mui/material/DialogContent");
 const DialogTitle_1 = require("@mui/material/DialogTitle");
 const Drawer_1 = __importStar(require("@mui/material/Drawer"));
+const BottomDrawer_1 = require("../BottomDrawer");
+const constants_1 = require("../SideDialogHeader/constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getSize = (size) => {
-    return constants_1.SIZES[size] || constants_1.SIZES.sm;
+    return constants_2.SIZES[size] || constants_2.SIZES.sm;
 };
 exports.StyledDrawer = (0, styled_1.styled)(Drawer_1.default, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -46,7 +48,7 @@ exports.StyledDrawer = (0, styled_1.styled)(Drawer_1.default, {
 
   .${Drawer_1.drawerClasses.paper} {
     width: ${({ $size }) => getSize($size)};
-    height: calc(100% - ${constants_1.SIDE_DIALOG_SCREEN_OFFSET});
+    height: calc(100% - ${constants_2.SIDE_DIALOG_SCREEN_OFFSET});
     margin: ${({ theme }) => theme.spacing(4)};
 
     border-radius: calc(${({ theme }) => theme.shape.medium} * 2);
@@ -57,3 +59,14 @@ exports.StyledDrawer = (0, styled_1.styled)(Drawer_1.default, {
     padding-top: ${({ theme }) => theme.spacing(4)};
   }
 `;
+exports.StyledBottomDrawer = (0, styled_1.styled)(BottomDrawer_1.BottomDrawer) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+    &:has(.${constants_1.sideDialogHeaderClassnames.root}) {
+      & .${BottomDrawer_1.bottomDrawerClassnames.header} {
+        display: none;
+      }
+    }
+  }
+`;

package/node/components/SideDialogActions/styles.js

@@ -20,4 +20,11 @@ exports.StyledDialogActions = (0, styled_1.styled)(DialogActions_1.DialogActions
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    bottom: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.paper};
+  }
 `;

package/node/components/SideDialogHeader/SideDialogHeader.js

@@ -2,8 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SideDialogHeader = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const SideDialogHeader = (props) => {
-    return (0, jsx_runtime_1.jsx)(styles_1.StyledDialogHeader, { ...props });
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledDialogHeader, { className: constants_1.sideDialogHeaderClassnames.root, ...props }));
 };
 exports.SideDialogHeader = SideDialogHeader;

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

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

package/node/components/SideDialogHeader/constants.js

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

package/node/components/SideDialogHeader/styles.js

@@ -20,4 +20,12 @@ exports.StyledDialogHeader = (0, styled_1.styled)(DialogHeader_1.DialogHeader) `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: sticky;
+    z-index: +1;
+    top: 0;
+
+    background-color: ${({ theme }) => theme.palette.background.paper};
+  }
 `;

package/package.json

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