@astral/ui 4.32.0 → 4.32.2

package/components/BottomDrawer/styles.js

@@ -7,9 +7,12 @@ export const StyledDrawer = styled(Drawer) `
   ${`.${paperClasses.root}`} {
     max-height: calc(100vh - ${OFFSET_TOP_SCREEN});
 
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (height: 100dvh) {
       max-height: calc(100dvh - ${OFFSET_TOP_SCREEN});
     }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
 
     border-top-left-radius: calc(${({ theme }) => theme.shape.medium} * 2);
     border-top-right-radius: calc(${({ theme }) => theme.shape.medium} * 2);

package/components/Chip/styles.js

@@ -99,6 +99,7 @@ export const Wrapper = styled.div `
 
     background-color: ${({ theme }) => theme.palette.components.disabled};
     border-color: transparent;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     mix-blend-mode: luminosity;
 
     & .${chipClassnames.startAdornment},

package/components/DashboardLayout/DashboardWrapper/styles.js

@@ -55,6 +55,8 @@ export const LayoutContent = styled('div', {
     });
 }};
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${dashboardSidebarClassnames.root}) {
     column-gap: ${({ theme }) => theme.spacing(4)};
 
@@ -63,9 +65,12 @@ export const LayoutContent = styled('div', {
     }
   }
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     column-gap: 0;

package/components/DashboardLayout/Header/styles.js

@@ -55,6 +55,8 @@ export const MobileSidebarTogglerWrapper = styled.div `
     padding: ${({ theme }) => theme.spacing(2)};
   }
   
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${dashboardLayoutClassnames.root}:not(:has(.${dashboardSidebarClassnames.root}))
     & {
     display: none;

package/components/DashboardSidebar/styles.js

@@ -86,6 +86,8 @@ export const SidebarHeader = styled.header `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:has(.${menuOrganizationClassnames.button}) {
       padding: 0;
     }

package/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -5,6 +5,7 @@ export const Item = styled.div `
 
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
   background-color: ${({ theme }) => theme.palette.background.default};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: ${({ $isDisabled }) => $isDisabled ? 'luminosity' : 'normal'};
 
   transition: ${({ theme }) => {
@@ -21,6 +22,8 @@ export const Item = styled.div `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${sidebarPopoverItemClassnames.content}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.small};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/components/DataGrid/styles.js

@@ -29,5 +29,6 @@ export const DisabledDataGridWrapper = styled(DataGridWrapper, {
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: luminosity;
 `;

package/components/DataGridInfinite/styles.js

@@ -11,6 +11,7 @@ export const DisabledDataGridWrapper = styled(DataGridWrapper) `
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: luminosity;
 `;
 export const FooterRow = styled.footer `

package/components/DatePicker/YearPicker/YearPicker.js

@@ -20,5 +20,5 @@ export const YearPicker = ({ date: initialDate, selectedDate, onChange, rangeDat
             : null,
     });
     const { year: yearCaption } = useContext(ConfigContext).datePickerLanguageMap;
-    return (_jsxs(DateCalendarWrapper, { children: [_jsx(DateCalendarHead, { ...headProps, arrowPostfixTitle: yearCaption.plural, isPlural: true, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: `${grid[0]?.year}-${grid.at(-1)?.year}` }), _jsx(DateCalendarGridLarge, { className: datePickerClassnames.yearsContainer, children: grid.map(({ year, date, isDisabled, isSelected, ...props }, index) => (_jsx(DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), lengthInRow: ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: year }, year))) })] }));
+    return (_jsxs(DateCalendarWrapper, { children: [_jsx(DateCalendarHead, { ...headProps, arrowPostfixTitle: yearCaption.plural, isPlural: true, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: `${grid[0]?.year}-${grid[grid.length - 1]?.year}` }), _jsx(DateCalendarGridLarge, { className: datePickerClassnames.yearsContainer, children: grid.map(({ year, date, isDisabled, isSelected, ...props }, index) => (_jsx(DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), lengthInRow: ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: year }, year))) })] }));
 };

package/components/Dialog/styles.js

@@ -21,6 +21,8 @@ export const StyledDialog = styled(MuiDialog, {
     box-shadow: ${({ theme }) => theme.elevation[300]};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:not(:has(.${dialogActionsClassnames.root})) .${dialogContentClassnames.root} {
     padding-bottom:  ${({ theme }) => theme.spacing(6)};
   }

package/components/ExpansionPanel/styles.js

@@ -9,6 +9,8 @@ export const Wrapper = styled('details') `
   border: 1px solid ${({ theme }) => theme.palette.grey[300]};
   border-radius: ${({ theme }) => theme.shape.medium};
   
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${expansionPanelClassnames.summary}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.medium};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/components/FlowButton/styles.js

@@ -18,6 +18,8 @@ export const StyledButton = styled(Button) `
     padding: ${({ theme: { spacing } }) => spacing(4, 5)};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${loaderClassnames.root}) {
     justify-content: center;
   }

package/components/MenuOrganization/styles.js

@@ -88,10 +88,12 @@ export const StyledPopover = styled(Popover) `
 
       height: calc(100vh - ${OFFSET_TOP_SCREEN});
 
+      /* Причина игнора: прогрессивное улучшение */
+      /* stylelint-disable plugin/no-unsupported-browser-features */
       @supports (height: 100dvh) {
         height: calc(100dvh - ${OFFSET_TOP_SCREEN});
       }
-
+      /* stylelint-enable plugin/no-unsupported-browser-features */
     }
   }
 

package/components/Notification/NotificationStackContainer/styles.js

@@ -55,9 +55,12 @@ export const Wrapper = styled.div `
 
     height: 100vh;
 
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (height: 100dvh) {
       height: 100dvh;
     }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
 
     .Toastify:not(:last-child) {
       overflow: hidden;

package/components/PageAsideBlock/styles.js

@@ -39,6 +39,10 @@ export const StyledDivider = styled(Divider, {
 
   width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(12)})` : '100%'};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    width: ${({ $isFullWidth, theme }) => ($isFullWidth ? `calc(100% + ${theme.spacing(10)})` : '100%')};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
 

package/components/PageContent/styles.js

@@ -81,6 +81,8 @@ export const Content = styled.div `
     }
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${pdfViewerClassnames.document}.${pdfViewerClassnames.zoom}) {
     scroll-behavior: auto;
     scrollbar-gutter: auto;

package/components/ResizingDataGrid/Sliders/styles.js

@@ -2,6 +2,9 @@ import { dataGridClassnames } from '../../DataGrid';
 import { css, styled } from '../../styled';
 const createThumbStyles = (theme) => css `
   pointer-events: all;
+
+  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: col-resize;
 
   transform-origin: top;
@@ -25,7 +28,10 @@ const createThumbStyles = (theme) => css `
     duration: theme.transitions.duration.short,
 })};
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   @supports (container-type: size) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     height: 100cqh;
     max-height: var(--thumb-height);
   }
@@ -35,12 +41,15 @@ const createThumbActiveStyles = (theme) => css `
 
   color: ${theme.palette.primary.dark};
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (container-type: size) {
     transform: translateY(calc(100cqh / 2 - var(--thumb-height) / 2))
       scaleX(0.4);
 
     max-height: calc(100cqh - var(--thumb-height) / 2);
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
 `;
 const createThumbHoverStyles = (theme) => css `
   color: ${theme.palette.grey[500]};
@@ -131,6 +140,8 @@ export const InputSlider = styled.input `
     ${({ theme }) => createThumbActiveStyles(theme)}
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${dataGridClassnames.root}:has(.${dataGridClassnames.header}:hover) &,
   &:focus-visible,
   &:hover,

package/components/SearchField/SearchField.js

@@ -2,10 +2,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { CrossOutlineMd } from '../../icons/CrossOutlineMd';
 import { TextField } from '../TextField';
+import { classNames } from '../utils/classNames';
+import { searchFieldClassnames } from './constants';
 import { EndAdornmentWrapper, LoaderWrapper, SearchIcon, StyledIconButton, StyledLoader, TextFieldRoot, } from './styles';
 import { useLogic } from './useLogic';
 export const SearchField = forwardRef((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = useLogic(props);
     const RenderComponent = inputComponent || TextField;
-    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { children: isLoading ? (_jsx(LoaderWrapper, { children: _jsx(StyledLoader, {}) })) : (_jsx(StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: _jsx(CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
+    return (_jsx(TextFieldRoot, { "$isFullWidth": fullWidth, children: _jsx(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: _jsx(SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: _jsx(EndAdornmentWrapper, { className: classNames({
+                    [searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
+                }), children: isLoading ? (_jsx(LoaderWrapper, { children: _jsx(StyledLoader, {}) })) : (_jsx(StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: _jsx(CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

package/components/SearchField/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const searchFieldClassnames: {
+    endAdornmentVisible: string;
+};

package/components/SearchField/constants.js

@@ -0,0 +1,4 @@
+import { createUIKitClassname } from '../utils/createUIKitClassname';
+export const searchFieldClassnames = {
+    endAdornmentVisible: createUIKitClassname('search-field__end-adornment_visible'),
+};

package/components/SearchField/styles.js

@@ -2,6 +2,7 @@ import { SearchOutlineMd } from '../../icons/SearchOutlineMd';
 import { IconButton } from '../IconButton';
 import { Loader } from '../Loader';
 import { styled } from '../styled';
+import { searchFieldClassnames } from './constants';
 export const SearchIcon = styled(SearchOutlineMd) `
   /* Задается чтобы клик по startAdornment приводил к клику в инпут */
   pointer-events: none;
@@ -32,8 +33,15 @@ export const LoaderWrapper = styled.div `
   height: 100%;
 `;
 export const EndAdornmentWrapper = styled.div `
+  /* Задается чтобы клик по endAdornment приводил к клику в инпут */
+  pointer-events: none;
+
   display: flex;
   align-items: center;
+
+  &.${searchFieldClassnames.endAdornmentVisible} {
+    pointer-events: unset;
+  }
 `;
 export const StyledLoader = styled(Loader) `
   width: 20px;

package/components/SideDialog/styles.js

@@ -11,9 +11,13 @@ export const StyledDrawer = styled(Drawer, {
 }) `
   height: 100vh;
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
   .${drawerClasses.paper} {
     width: ${({ $size }) => getSize($size)};
     height: calc(100% - ${SIDE_DIALOG_SCREEN_OFFSET});

package/components/StaticCalendar/StaticCalendarGridButton/styles.js

@@ -19,6 +19,8 @@ const nonForwardableProps = new Set([
 export const StaticCalendarGridButton = styled(StaticCalendarButton, {
     shouldForwardProp: (propName) => !nonForwardableProps.has(propName),
 }) `
+  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: ${({ $isNotInteractable, $isDraggable }) => ($isDraggable && 'grab') || ($isNotInteractable && 'initial')};
 
   position: relative;

package/components/Stepper/styles.js

@@ -33,6 +33,8 @@ export const StyledStepper = styled(Stepper) `
     margin-left: 9px;
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${stepClasses.vertical}:has(.${stepContentClasses.root}) {
     + .${stepConnectorClasses.vertical} {
       display: none;

package/components/WelcomeScreen/styles.js

@@ -33,9 +33,13 @@ export const FirstStep = styled.div `
   width: 100%;
   height: 100vh;
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
   opacity: 0;
   background-color: ${({ theme }) => theme.palette.background.paper};
 

package/hook-form/FormFiltersModalGroup/styles.js

@@ -2,6 +2,7 @@ import { Grid } from '../../components/Grid';
 import { styled } from '../../components/styled';
 import { formFiltersClassnames } from '../FormFilters/constants';
 export const Container = styled(Grid) `
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   display: contents;
 
   > * {

package/node/components/BottomDrawer/styles.js

@@ -13,9 +13,12 @@ exports.StyledDrawer = (0, styled_1.styled)(Drawer_1.default) `
   ${`.${Paper_1.paperClasses.root}`} {
     max-height: calc(100vh - ${constants_1.OFFSET_TOP_SCREEN});
 
+    /* Причина игнора: прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (height: 100dvh) {
       max-height: calc(100dvh - ${constants_1.OFFSET_TOP_SCREEN});
     }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
 
     border-top-left-radius: calc(${({ theme }) => theme.shape.medium} * 2);
     border-top-right-radius: calc(${({ theme }) => theme.shape.medium} * 2);

package/node/components/Chip/styles.js

@@ -102,6 +102,7 @@ exports.Wrapper = styled_1.styled.div `
 
     background-color: ${({ theme }) => theme.palette.components.disabled};
     border-color: transparent;
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     mix-blend-mode: luminosity;
 
     & .${constants_1.chipClassnames.startAdornment},

package/node/components/DashboardLayout/DashboardWrapper/styles.js

@@ -58,6 +58,8 @@ exports.LayoutContent = (0, styled_1.styled)('div', {
     });
 }};
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${constants_1.dashboardSidebarClassnames.root}) {
     column-gap: ${({ theme }) => theme.spacing(4)};
 
@@ -66,9 +68,12 @@ exports.LayoutContent = (0, styled_1.styled)('div', {
     }
   }
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
     column-gap: 0;

package/node/components/DashboardLayout/Header/styles.js

@@ -58,6 +58,8 @@ exports.MobileSidebarTogglerWrapper = styled_1.styled.div `
     padding: ${({ theme }) => theme.spacing(2)};
   }
   
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${constants_4.dashboardLayoutClassnames.root}:not(:has(.${constants_1.dashboardSidebarClassnames.root}))
     & {
     display: none;

package/node/components/DashboardSidebar/styles.js

@@ -89,6 +89,8 @@ exports.SidebarHeader = styled_1.styled.header `
 
     border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
 
+    /* Причина игнора: Не критично для отображения */
+    /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     &:has(.${constants_3.menuOrganizationClassnames.button}) {
       padding: 0;
     }

package/node/components/DashboardSidebarPopover/SidebarPopoverItem/styles.js

@@ -8,6 +8,7 @@ exports.Item = styled_1.styled.div `
 
   opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};
   background-color: ${({ theme }) => theme.palette.background.default};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: ${({ $isDisabled }) => $isDisabled ? 'luminosity' : 'normal'};
 
   transition: ${({ theme }) => {
@@ -24,6 +25,8 @@ exports.Item = styled_1.styled.div `
     background-color: ${({ theme }) => theme.palette.primary[100]};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${constants_1.sidebarPopoverItemClassnames.content}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.small};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/node/components/DataGrid/styles.js

@@ -32,5 +32,6 @@ exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper,
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: luminosity;
 `;

package/node/components/DataGridInfinite/styles.js

@@ -14,6 +14,7 @@ exports.DisabledDataGridWrapper = (0, styled_1.styled)(exports.DataGridWrapper)
   pointer-events: none;
 
   background: ${({ theme }) => theme.palette.background.element};
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   mix-blend-mode: luminosity;
 `;
 exports.FooterRow = styled_1.styled.footer `

package/node/components/DatePicker/YearPicker/YearPicker.js

@@ -23,6 +23,6 @@ const YearPicker = ({ date: initialDate, selectedDate, onChange, rangeDate, ...h
             : null,
     });
     const { year: yearCaption } = (0, react_1.useContext)(ConfigProvider_1.ConfigContext).datePickerLanguageMap;
-    return ((0, jsx_runtime_1.jsxs)(DateCalendar_1.DateCalendarWrapper, { children: [(0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarHead, { ...headProps, arrowPostfixTitle: yearCaption.plural, isPlural: true, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: `${grid[0]?.year}-${grid.at(-1)?.year}` }), (0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarGridLarge, { className: constants_1.datePickerClassnames.yearsContainer, children: grid.map(({ year, date, isDisabled, isSelected, ...props }, index) => ((0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), lengthInRow: constants_1.ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: year }, year))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(DateCalendar_1.DateCalendarWrapper, { children: [(0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarHead, { ...headProps, arrowPostfixTitle: yearCaption.plural, isPlural: true, onPrevClick: handlePrevClick, onNextClick: handleNextClick, headBtnText: `${grid[0]?.year}-${grid[grid.length - 1]?.year}` }), (0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarGridLarge, { className: constants_1.datePickerClassnames.yearsContainer, children: grid.map(({ year, date, isDisabled, isSelected, ...props }, index) => ((0, jsx_runtime_1.jsx)(DateCalendar_1.DateCalendarGridButtonLarge, { onClick: () => onChange?.(date), lengthInRow: constants_1.ELEMENTS_COUNT_IN_ROW_IN_LARGE_GRID, isPreviousItemInSelectedRange: grid[index - 1]?.isInSelectedRange, disabled: isDisabled, selected: isSelected, isTooltipActive: false, ...props, children: year }, year))) })] }));
 };
 exports.YearPicker = YearPicker;

package/node/components/Dialog/styles.js

@@ -47,6 +47,8 @@ exports.StyledDialog = (0, styled_1.styled)(Dialog_1.default, {
     box-shadow: ${({ theme }) => theme.elevation[300]};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:not(:has(.${DialogActions_1.dialogActionsClassnames.root})) .${DialogContent_1.dialogContentClassnames.root} {
     padding-bottom:  ${({ theme }) => theme.spacing(6)};
   }

package/node/components/ExpansionPanel/styles.js

@@ -12,6 +12,8 @@ exports.Wrapper = (0, styled_1.styled)('details') `
   border: 1px solid ${({ theme }) => theme.palette.grey[300]};
   border-radius: ${({ theme }) => theme.shape.medium};
   
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${constants_1.expansionPanelClassnames.summary}:focus-visible) {
     border-radius: ${({ theme }) => theme.shape.medium};
     outline: 2px solid ${({ theme }) => theme.palette.components.focused};

package/node/components/FlowButton/styles.js

@@ -21,6 +21,8 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
     padding: ${({ theme: { spacing } }) => spacing(4, 5)};
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${Loader_1.loaderClassnames.root}) {
     justify-content: center;
   }

package/node/components/MenuOrganization/styles.js

@@ -91,10 +91,12 @@ exports.StyledPopover = (0, styled_1.styled)(Popover_1.Popover) `
 
       height: calc(100vh - ${constants_1.OFFSET_TOP_SCREEN});
 
+      /* Причина игнора: прогрессивное улучшение */
+      /* stylelint-disable plugin/no-unsupported-browser-features */
       @supports (height: 100dvh) {
         height: calc(100dvh - ${constants_1.OFFSET_TOP_SCREEN});
       }
-
+      /* stylelint-enable plugin/no-unsupported-browser-features */
     }
   }
 

package/node/components/Notification/NotificationStackContainer/styles.js

@@ -58,9 +58,12 @@ exports.Wrapper = styled_1.styled.div `
 
     height: 100vh;
 
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
     @supports (height: 100dvh) {
       height: 100dvh;
     }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
 
     .Toastify:not(:last-child) {
       overflow: hidden;

package/node/components/PageAsideBlock/styles.js

@@ -42,6 +42,10 @@ exports.StyledDivider = (0, styled_1.styled)(Divider_2.Divider, {
 
   width: ${({ $isFullWidth, theme }) => $isFullWidth ? `calc(100% + ${theme.spacing(12)})` : '100%'};
 
+  ${({ theme }) => theme.breakpoints.down('laptop')} {
+    width: ${({ $isFullWidth, theme }) => ($isFullWidth ? `calc(100% + ${theme.spacing(10)})` : '100%')};
+  }
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     left: ${({ $isFullWidth, theme }) => $isFullWidth ? `${theme.spacing(-4)}` : '0'};
 

package/node/components/PageContent/styles.js

@@ -84,6 +84,8 @@ exports.Content = styled_1.styled.div `
     }
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   &:has(.${PdfViewer_1.pdfViewerClassnames.document}.${PdfViewer_1.pdfViewerClassnames.zoom}) {
     scroll-behavior: auto;
     scrollbar-gutter: auto;

package/node/components/ResizingDataGrid/Sliders/styles.js

@@ -5,6 +5,9 @@ const DataGrid_1 = require("../../DataGrid");
 const styled_1 = require("../../styled");
 const createThumbStyles = (theme) => (0, styled_1.css) `
   pointer-events: all;
+
+  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: col-resize;
 
   transform-origin: top;
@@ -28,7 +31,10 @@ const createThumbStyles = (theme) => (0, styled_1.css) `
     duration: theme.transitions.duration.short,
 })};
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   @supports (container-type: size) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
     height: 100cqh;
     max-height: var(--thumb-height);
   }
@@ -38,12 +44,15 @@ const createThumbActiveStyles = (theme) => (0, styled_1.css) `
 
   color: ${theme.palette.primary.dark};
 
+  /* Причина игнора: прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (container-type: size) {
     transform: translateY(calc(100cqh / 2 - var(--thumb-height) / 2))
       scaleX(0.4);
 
     max-height: calc(100cqh - var(--thumb-height) / 2);
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
 `;
 const createThumbHoverStyles = (theme) => (0, styled_1.css) `
   color: ${theme.palette.grey[500]};
@@ -134,6 +143,8 @@ exports.InputSlider = styled_1.styled.input `
     ${({ theme }) => createThumbActiveStyles(theme)}
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${DataGrid_1.dataGridClassnames.root}:has(.${DataGrid_1.dataGridClassnames.header}:hover) &,
   &:focus-visible,
   &:hover,

package/node/components/SearchField/SearchField.js

@@ -5,10 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CrossOutlineMd_1 = require("../../icons/CrossOutlineMd");
 const TextField_1 = require("../TextField");
+const classNames_1 = require("../utils/classNames");
+const constants_1 = require("./constants");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 exports.SearchField = (0, react_1.forwardRef)((props, ref) => {
     const { onChange, onClearValue, restProps, isLoading, inputRef, value, disabled, isClearButtonDisabled, onBlur, fullWidth, inputComponent, placeholder, hideHelperText, } = (0, useLogic_1.useLogic)(props);
     const RenderComponent = inputComponent || TextField_1.TextField;
-    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { children: isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.TextFieldRoot, { "$isFullWidth": fullWidth, children: (0, jsx_runtime_1.jsx)(RenderComponent, { type: "search", placeholder: placeholder, startAdornment: (0, jsx_runtime_1.jsx)(styles_1.SearchIcon, {}), disabled: disabled, hideHelperText: hideHelperText, endAdornment: (0, jsx_runtime_1.jsx)(styles_1.EndAdornmentWrapper, { className: (0, classNames_1.classNames)({
+                    [constants_1.searchFieldClassnames.endAdornmentVisible]: !isClearButtonDisabled,
+                }), children: isLoading ? ((0, jsx_runtime_1.jsx)(styles_1.LoaderWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.StyledLoader, {}) })) : ((0, jsx_runtime_1.jsx)(styles_1.StyledIconButton, { variant: "text", onClick: onClearValue, disabled: isClearButtonDisabled, "$isActive": !isClearButtonDisabled, children: (0, jsx_runtime_1.jsx)(CrossOutlineMd_1.CrossOutlineMd, {}) })) }), onChange: onChange, value: value, ref: ref, inputRef: inputRef, trimmed: false, onBlur: onBlur, fullWidth: fullWidth, ...restProps }) }));
 });

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

@@ -0,0 +1,3 @@
+export declare const searchFieldClassnames: {
+    endAdornmentVisible: string;
+};

package/node/components/SearchField/constants.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.searchFieldClassnames = void 0;
+const createUIKitClassname_1 = require("../utils/createUIKitClassname");
+exports.searchFieldClassnames = {
+    endAdornmentVisible: (0, createUIKitClassname_1.createUIKitClassname)('search-field__end-adornment_visible'),
+};

package/node/components/SearchField/styles.js

@@ -5,6 +5,7 @@ const SearchOutlineMd_1 = require("../../icons/SearchOutlineMd");
 const IconButton_1 = require("../IconButton");
 const Loader_1 = require("../Loader");
 const styled_1 = require("../styled");
+const constants_1 = require("./constants");
 exports.SearchIcon = (0, styled_1.styled)(SearchOutlineMd_1.SearchOutlineMd) `
   /* Задается чтобы клик по startAdornment приводил к клику в инпут */
   pointer-events: none;
@@ -35,8 +36,15 @@ exports.LoaderWrapper = styled_1.styled.div `
   height: 100%;
 `;
 exports.EndAdornmentWrapper = styled_1.styled.div `
+  /* Задается чтобы клик по endAdornment приводил к клику в инпут */
+  pointer-events: none;
+
   display: flex;
   align-items: center;
+
+  &.${constants_1.searchFieldClassnames.endAdornmentVisible} {
+    pointer-events: unset;
+  }
 `;
 exports.StyledLoader = (0, styled_1.styled)(Loader_1.Loader) `
   width: 20px;

package/node/components/SideDialog/styles.js

@@ -37,9 +37,13 @@ exports.StyledDrawer = (0, styled_1.styled)(Drawer_1.default, {
 }) `
   height: 100vh;
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
   .${Drawer_1.drawerClasses.paper} {
     width: ${({ $size }) => getSize($size)};
     height: calc(100% - ${constants_1.SIDE_DIALOG_SCREEN_OFFSET});

package/node/components/StaticCalendar/StaticCalendarGridButton/styles.js

@@ -22,6 +22,8 @@ const nonForwardableProps = new Set([
 exports.StaticCalendarGridButton = (0, styled_1.styled)(StaticCalendarButton_1.StaticCalendarButton, {
     shouldForwardProp: (propName) => !nonForwardableProps.has(propName),
 }) `
+  /* Причина игнора: Не поддерживается на мобильных устройствах. Не критично */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   cursor: ${({ $isNotInteractable, $isDraggable }) => ($isDraggable && 'grab') || ($isNotInteractable && 'initial')};
 
   position: relative;

package/node/components/Stepper/styles.js

@@ -39,6 +39,8 @@ exports.StyledStepper = (0, styled_1.styled)(Stepper_1.default) `
     margin-left: 9px;
   }
 
+  /* Причина игнора: Не критично для отображения */
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   .${Step_1.stepClasses.vertical}:has(.${StepContent_1.stepContentClasses.root}) {
     + .${StepConnector_1.stepConnectorClasses.vertical} {
       display: none;

package/node/components/WelcomeScreen/styles.js

@@ -36,9 +36,13 @@ exports.FirstStep = styled_1.styled.div `
   width: 100%;
   height: 100vh;
 
+  /* Причина игнора: Прогрессивное улучшение */
+  /* stylelint-disable plugin/no-unsupported-browser-features */
   @supports (height: 100dvh) {
     height: 100dvh;
   }
+  /* stylelint-enable plugin/no-unsupported-browser-features */
+
   opacity: 0;
   background-color: ${({ theme }) => theme.palette.background.paper};
 

package/node/hook-form/FormFiltersModalGroup/styles.js

@@ -5,6 +5,7 @@ const Grid_1 = require("../../components/Grid");
 const styled_1 = require("../../components/styled");
 const constants_1 = require("../FormFilters/constants");
 exports.Container = (0, styled_1.styled)(Grid_1.Grid) `
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   display: contents;
 
   > * {

package/package.json

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