@astral/ui 4.9.0 → 4.11.0

package/components/CheckboxField/CheckboxField.d.ts

@@ -29,9 +29,7 @@ export declare const CheckboxField: import("react").ForwardRefExoticComponent<im
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
     isError?: boolean | undefined;
-    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined; /**
-     * Флаг принудительного скрытия блока helperText
-     */
+    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
     name?: string | undefined;
     value?: string | undefined;
     defaultChecked?: boolean | undefined;

package/components/CheckboxField/CheckboxField.js

@@ -3,11 +3,12 @@ import { forwardRef, useMemo } from 'react';
 import { Checkbox } from '../Checkbox';
 import { FormControl } from '../FormControl';
 import { Tooltip } from '../Tooltip';
+import { checkboxFieldClassnames } from './constants';
 import { StyledFormControlledLabel, StyledFormHelperText } from './styles';
 /**
  * Составной компонент чекбокса. Содержит label, tooltip, helperText и т.д.
  */
 export const CheckboxField = forwardRef(({ isSuccess, helperText, hideHelperText = false, label, isError, ...restProps }, ref) => {
     const showTooltip = useMemo(() => Boolean(isError && hideHelperText), [isError, hideHelperText]);
-    return (_jsxs(FormControl, { ref: ref, children: [_jsx(Tooltip, { title: showTooltip && helperText, placement: "bottom-start", withoutContainer: false, children: _jsx(StyledFormControlledLabel, { control: _jsx(Checkbox, { isError: isError, ...restProps }), label: label }) }), !hideHelperText && (_jsx(StyledFormHelperText, { error: isError, success: isSuccess, children: helperText }))] }));
+    return (_jsxs(FormControl, { ref: ref, children: [_jsx(Tooltip, { title: showTooltip && helperText, placement: "bottom-start", withoutContainer: false, children: _jsx(StyledFormControlledLabel, { classes: { label: checkboxFieldClassnames.label }, control: _jsx(Checkbox, { isError: isError, ...restProps }), label: label }) }), !hideHelperText && (_jsx(StyledFormHelperText, { error: isError, success: isSuccess, children: helperText }))] }));
 });

package/components/CheckboxField/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const checkboxFieldClassnames: {
+    label: string;
+};

package/components/CheckboxField/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils';
+export const checkboxFieldClassnames = {
+    label: createUIKitClassname('checkbox-field__label'),
+};

package/components/CheckboxField/index.d.ts

@@ -1 +1,2 @@
 export * from './CheckboxField';
+export { checkboxFieldClassnames } from './constants';

package/components/CheckboxField/index.js

@@ -1 +1,2 @@
 export * from './CheckboxField';
+export { checkboxFieldClassnames } from './constants';

package/components/CheckboxField/styles.js

@@ -1,11 +1,11 @@
-import { typographyClasses } from '@mui/material';
 import { FormControlLabel } from '../FormControlLabel';
 import { FormHelperText } from '../FormHelperText';
 import { styled } from '../styles';
+import { checkboxFieldClassnames } from './constants';
 export const StyledFormControlledLabel = styled(FormControlLabel) `
   align-items: flex-start;
 
-  .${typographyClasses.root} {
+  .${checkboxFieldClassnames.label} {
     margin-left: 0;
     padding-top: calc(${({ theme }) => theme.spacing(1)} + 2px);
 

package/components/PageLayout/PageHeader/HeaderContent/HeaderContent.js

@@ -13,5 +13,5 @@ export const HeaderContent = ({ backButton, description, subheader, breadcrumbs,
         }
         return (_jsx(BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? (_jsx(Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "large", ...actions })), subheader && _jsx(PageSubheader, { children: subheader })] }));
+    return (_jsxs(_Fragment, { children: [renderBreadcrumbs(), _jsx(DesktopTitleWrapper, { children: _jsx(Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), _jsx(Description, { description: description, isLoading: isLoading }), actions && (_jsx(PageActions, { className: classNames(pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && _jsx(PageSubheader, { children: subheader })] }));
 };

package/components/PageLayout/PageHeader/Title/Title.js

@@ -6,5 +6,5 @@ export const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcr
     if (!title && isLoading) {
         return _jsx(StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
     }
-    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "large", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+    return (_jsxs(_Fragment, { children: [backButton && (_jsx(BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: _jsx(ArrowLOutlineMd, {}) })), typeof title === 'string' ? (_jsx(TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: _jsx(OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : (_jsx(TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
 };

package/components/PageLayout/PageHeader/Title/styles.js

@@ -23,6 +23,8 @@ export const TitleWrapper = styled(Typography, {
   align-self: center;
 
   margin-right: ${({ theme }) => theme.spacing(3)};
+
+  line-height: ${({ theme }) => theme.typography.h2.lineHeight};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     font-size: ${({ theme }) => theme.typography.h5.fontSize};

package/components/TextField/styles.js

@@ -11,6 +11,6 @@ export const StyledTextField = styled(TextField) `
       &:not(:empty) {
         margin: ${({ theme }) => theme.spacing(1, 0, 0)};
       }
-    }
+    } 
   }
 `;

package/components/theme/components/MuiOutlinedInput.js

@@ -46,6 +46,9 @@ export const MuiOutlinedInput = {
                 paddingLeft: isStartAdornmentString
                     ? theme.spacing(1)
                     : theme.spacing(3),
+                '&:autofill': {
+                    boxShadow: '0 0 0 1000px white inset',
+                },
                 '&::placeholder': {
                     opacity: 1,
                     color: theme.palette.grey[400],

package/node/components/CheckboxField/CheckboxField.d.ts

@@ -29,9 +29,7 @@ export declare const CheckboxField: import("react").ForwardRefExoticComponent<im
     checked?: boolean | undefined;
     indeterminate?: boolean | undefined;
     isError?: boolean | undefined;
-    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined; /**
-     * Флаг принудительного скрытия блока helperText
-     */
+    onChange?: ((event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void) | undefined;
     name?: string | undefined;
     value?: string | undefined;
     defaultChecked?: boolean | undefined;

package/node/components/CheckboxField/CheckboxField.js

@@ -6,11 +6,12 @@ const react_1 = require("react");
 const Checkbox_1 = require("../Checkbox");
 const FormControl_1 = require("../FormControl");
 const Tooltip_1 = require("../Tooltip");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 /**
  * Составной компонент чекбокса. Содержит label, tooltip, helperText и т.д.
  */
 exports.CheckboxField = (0, react_1.forwardRef)(({ isSuccess, helperText, hideHelperText = false, label, isError, ...restProps }, ref) => {
     const showTooltip = (0, react_1.useMemo)(() => Boolean(isError && hideHelperText), [isError, hideHelperText]);
-    return ((0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ref: ref, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: showTooltip && helperText, placement: "bottom-start", withoutContainer: false, children: (0, jsx_runtime_1.jsx)(styles_1.StyledFormControlledLabel, { control: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { isError: isError, ...restProps }), label: label }) }), !hideHelperText && ((0, jsx_runtime_1.jsx)(styles_1.StyledFormHelperText, { error: isError, success: isSuccess, children: helperText }))] }));
+    return ((0, jsx_runtime_1.jsxs)(FormControl_1.FormControl, { ref: ref, children: [(0, jsx_runtime_1.jsx)(Tooltip_1.Tooltip, { title: showTooltip && helperText, placement: "bottom-start", withoutContainer: false, children: (0, jsx_runtime_1.jsx)(styles_1.StyledFormControlledLabel, { classes: { label: constants_1.checkboxFieldClassnames.label }, control: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { isError: isError, ...restProps }), label: label }) }), !hideHelperText && ((0, jsx_runtime_1.jsx)(styles_1.StyledFormHelperText, { error: isError, success: isSuccess, children: helperText }))] }));
 });

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

@@ -0,0 +1,3 @@
+export declare const checkboxFieldClassnames: {
+    label: string;
+};

package/node/components/CheckboxField/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.checkboxFieldClassnames = void 0;
+const utils_1 = require("../utils");
+exports.checkboxFieldClassnames = {
+    label: (0, utils_1.createUIKitClassname)('checkbox-field__label'),
+};

package/node/components/CheckboxField/index.d.ts

@@ -1 +1,2 @@
 export * from './CheckboxField';
+export { checkboxFieldClassnames } from './constants';

package/node/components/CheckboxField/index.js

@@ -14,4 +14,7 @@ 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 });
+exports.checkboxFieldClassnames = void 0;
 __exportStar(require("./CheckboxField"), exports);
+var constants_1 = require("./constants");
+Object.defineProperty(exports, "checkboxFieldClassnames", { enumerable: true, get: function () { return constants_1.checkboxFieldClassnames; } });

package/node/components/CheckboxField/styles.js

@@ -1,14 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledFormHelperText = exports.StyledFormControlledLabel = void 0;
-const material_1 = require("@mui/material");
 const FormControlLabel_1 = require("../FormControlLabel");
 const FormHelperText_1 = require("../FormHelperText");
 const styles_1 = require("../styles");
+const constants_1 = require("./constants");
 exports.StyledFormControlledLabel = (0, styles_1.styled)(FormControlLabel_1.FormControlLabel) `
   align-items: flex-start;
 
-  .${material_1.typographyClasses.root} {
+  .${constants_1.checkboxFieldClassnames.label} {
     margin-left: 0;
     padding-top: calc(${({ theme }) => theme.spacing(1)} + 2px);
 

package/node/components/PageLayout/PageHeader/HeaderContent/HeaderContent.js

@@ -16,6 +16,6 @@ const HeaderContent = ({ backButton, description, subheader, breadcrumbs, action
         }
         return ((0, jsx_runtime_1.jsx)(styles_1.BreadcrumbsWrapper, { children: Array.isArray(breadcrumbs) ? ((0, jsx_runtime_1.jsx)(Breadcrumbs_1.Breadcrumbs, { children: breadcrumbs })) : (breadcrumbs) }));
     };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "large", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderBreadcrumbs(), (0, jsx_runtime_1.jsx)(styles_1.DesktopTitleWrapper, { children: (0, jsx_runtime_1.jsx)(Title_1.Title, { backButton: backButton, title: title, isLoading: isLoading, hasDescription: Boolean(description), hasBreadcrumbs: Boolean(breadcrumbs) }) }), (0, jsx_runtime_1.jsx)(Description_1.Description, { description: description, isLoading: isLoading }), actions && ((0, jsx_runtime_1.jsx)(PageActions_1.PageActions, { className: (0, utils_1.classNames)(constants_1.pageHeaderClassnames.pageHeaderActions), isLoading: isLoading, size: "medium", ...actions })), subheader && (0, jsx_runtime_1.jsx)(styles_1.PageSubheader, { children: subheader })] }));
 };
 exports.HeaderContent = HeaderContent;

package/node/components/PageLayout/PageHeader/Title/Title.js

@@ -9,6 +9,6 @@ const Title = ({ backButton, title, isLoading, hasDescription, hasBreadcrumbs, }
     if (!title && isLoading) {
         return (0, jsx_runtime_1.jsx)(styles_1.StyledSkeleton, { height: 20, width: 280, variant: "rounded" });
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "large", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [backButton && ((0, jsx_runtime_1.jsx)(styles_1.BackButton, { ...backButton, variant: "outlined", color: "grey", size: "medium", children: (0, jsx_runtime_1.jsx)(icons_1.ArrowLOutlineMd, {}) })), typeof title === 'string' ? ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "h1", variant: "h3", "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: (0, jsx_runtime_1.jsx)(OverflowTypography_1.OverflowTypography, { component: "div", variant: "inherit", children: title }) })) : ((0, jsx_runtime_1.jsx)(styles_1.TitleWrapper, { component: "div", role: "heading", variant: "h3", "aria-level": 1, "$hasDescription": hasDescription, "$hasBreadcrumbs": hasBreadcrumbs, children: title }))] }));
 };
 exports.Title = Title;

package/node/components/PageLayout/PageHeader/Title/styles.js

@@ -26,6 +26,8 @@ exports.TitleWrapper = (0, styles_1.styled)(Typography_1.Typography, {
   align-self: center;
 
   margin-right: ${({ theme }) => theme.spacing(3)};
+
+  line-height: ${({ theme }) => theme.typography.h2.lineHeight};
   
   ${({ theme }) => theme.breakpoints.down('sm')} {
     font-size: ${({ theme }) => theme.typography.h5.fontSize};

package/node/components/TextField/styles.js

@@ -14,6 +14,6 @@ exports.StyledTextField = (0, styles_1.styled)(material_1.TextField) `
       &:not(:empty) {
         margin: ${({ theme }) => theme.spacing(1, 0, 0)};
       }
-    }
+    } 
   }
 `;

package/node/components/theme/components/MuiOutlinedInput.js

@@ -49,6 +49,9 @@ exports.MuiOutlinedInput = {
                 paddingLeft: isStartAdornmentString
                     ? theme.spacing(1)
                     : theme.spacing(3),
+                '&:autofill': {
+                    boxShadow: '0 0 0 1000px white inset',
+                },
                 '&::placeholder': {
                     opacity: 1,
                     color: theme.palette.grey[400],

package/package.json

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