@astral/ui 4.42.1 → 4.44.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/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/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/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/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/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/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/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.42.1",
+  "version": "4.44.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {