@astral/ui 4.101.0 → 4.102.0

package/components/MenuOrganization/OrganizationButton/styles.js

@@ -1,5 +1,6 @@
 import { Button } from '../../Button';
 import { Chevron } from '../../Chevron';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled/styled';
 import { Typography } from '../../Typography';
 export const StyledButton = styled(Button) `
@@ -13,8 +14,10 @@ export const StyledButton = styled(Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -32,10 +35,6 @@ export const StyledButton = styled(Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

package/components/NavMenu/Item/ItemButton/styles.js

@@ -1,6 +1,7 @@
 import { listItemButtonClasses } from '@mui/material/ListItemButton';
 import { ChevronDOutlineMd } from '../../../../icons/ChevronDOutlineMd';
 import { PageDotOutlineMd } from '../../../../icons/PageDotOutlineMd';
+import { HOVER_MEDIA } from '../../../constants';
 import { ListItemButton } from '../../../ListItemButton';
 import { ListItemIcon } from '../../../ListItemIcon';
 import { OverflowTypography } from '../../../OverflowTypography';
@@ -33,23 +34,29 @@ export const StyledListItemButton = styled(ListItemButton) `
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
     &.${navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {

package/components/NewStepper/Step/styles.js

@@ -1,5 +1,6 @@
 import { NextOutlineMd } from '../../../icons/NextOutlineMd';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { typographyClassnames } from '../../Typography/constants';
 import { STEPPER_ORDER_COUNTER_NAME } from '../constants';
@@ -271,26 +272,28 @@ export const StyledButton = styled(Button) `
     height: auto;
   }
 
-  &:hover {
-    background: transparent;
+  ${HOVER_MEDIA} {
+    &:hover {
+      background: transparent;
 
-    & .${stepClassnames.label} {
-      color: ${({ theme }) => theme.palette.grey[700]};
-    }
+      & .${stepClassnames.label} {
+        color: ${({ theme }) => theme.palette.grey[700]};
+      }
 
-    & .${stepIconClassnames.root} {
-      color: ${({ theme }) => theme.palette.primary[700]};
+      & .${stepIconClassnames.root} {
+        color: ${({ theme }) => theme.palette.primary[700]};
 
-      &.${stepIconClassnames.success} {
-        color: ${({ theme }) => theme.palette.success[700]};
-      }
+        &.${stepIconClassnames.success} {
+          color: ${({ theme }) => theme.palette.success[700]};
+        }
 
-      &.${stepIconClassnames.error} {
-        color: ${({ theme }) => theme.palette.error[700]};
-      }
+        &.${stepIconClassnames.error} {
+          color: ${({ theme }) => theme.palette.error[700]};
+        }
 
-      &.${stepIconClassnames.warning} {
-        color: ${({ theme }) => theme.palette.warning[700]};
+        &.${stepIconClassnames.warning} {
+          color: ${({ theme }) => theme.palette.warning[700]};
+        }
       }
     }
   }

package/components/Notification/NotificationStackContainer/styles.js

@@ -1,5 +1,6 @@
 import { ToastContainer } from 'react-toastify-next';
 import { Button } from '../../Button';
+import { HOVER_MEDIA } from '../../constants';
 import { keyframes, styled } from '../../styled';
 import { NOTIFY_HEIGHT, NOTIFY_HEIGHT_MOBILE, NOTIFY_NO_TRANSITION_ATTR, NotificationVariantTypes, notifyClassnames, } from '../constants';
 const fade = keyframes `
@@ -485,8 +486,10 @@ export const CloseButton = styled(Button) `
 
   animation: ${fade} 500ms linear;
 
-  &:hover {
-    box-shadow: ${({ theme }) => theme.elevation[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      box-shadow: ${({ theme }) => theme.elevation[300]};
+    }
   }
 
   &.${notifyClassnames.closeButtonAnimationOut} {

package/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 import { svgIconClassnames } from '../../SvgIcon/constants';
 import { styled } from '../../styled';
 import { pageAsideNavigationItemClassnames } from './constants';
@@ -33,8 +34,10 @@ export const Wrapper = styled.li `
       color: ${({ theme }) => theme.palette.grey[800]};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.primary[800]};
+    ${HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.primary[800]};
+      }
     }
 
     &:active {
@@ -73,10 +76,6 @@ export const Wrapper = styled.li `
       transition: ${({ theme }) => theme.transitions.create(['border-color', 'background-color'], {
     duration: theme.transitions.duration.shortest,
 })};
-      
-      &:hover {
-        color: ${({ theme }) => theme.palette.grey[800]};
-      }
 
       &:active {
         color: ${({ theme }) => theme.palette.grey[800]};

package/components/PageHeader/MobilePageActions/styles.js

@@ -37,10 +37,6 @@ export const ShowMoreButton = styled(Button) `
     height: 40px;
     min-height: 40px;
     padding: 0;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 `;
 export const StyledCollapse = styled(Collapse) `

package/components/Radio/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { styled } from '../styled';
 import { easeOutBackTransition } from '../styled/mixins';
 import { MOBILE_RADIO_SIZE, RADIO_SIZE, radioClassnames } from './constants';
@@ -58,22 +59,24 @@ export const Wrapper = styled('span', {
     ${easeOutBackTransition}; 
   }
 
-  &:hover {    
-    .${radioClassnames.outerCircle} {
-      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
+  ${HOVER_MEDIA} {
+    &:hover {
+      .${radioClassnames.outerCircle} {
+        fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
-      stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
+        stroke: ${({ theme, $isDisabled, $isError, $isChecked }) => getOutlineColor({
     theme,
     isHover: true,
     isDisabled: $isDisabled,
     isError: $isError,
     isChecked: $isChecked,
 })};
+      }
     }
   }
 `;

package/components/RadioCard/styles.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../constants';
 import { Radio, radioClassnames } from '../Radio';
 import { styled } from '../styled';
 import { radioCardClassnames } from './constants';
@@ -63,10 +64,12 @@ export const Wrapper = styled.label `
     cursor: default;
   }
 
-  &:hover {
-    background-color: ${({ theme, $isDisabled }) => $isDisabled
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, $isDisabled }) => $isDisabled
     ? theme.palette.background.element
     : theme.palette.background.elementHover};
+    }
   }
 `;
 export const Content = styled.div `

package/components/StaticCalendar/StaticCalendarGridButton/styles.js

@@ -1,4 +1,5 @@
 import { buttonClasses } from '@mui/material/Button';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 import { StaticCalendarButton } from '../StaticCalendarButton';
 import { getBgColor, getLeftBorderRadius, getRightBorderRadius, getTextColor, } from './utils';
@@ -53,11 +54,13 @@ export const StaticCalendarGridButton = styled(StaticCalendarButton, {
     background-color: currentColor;
   }
   
-  &:hover {
-    border-radius: ${(props) => getLeftBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
-    ${(props) => getLeftBorderRadius({ isHovered: true, ...props })};
+  ${HOVER_MEDIA} {
+    &:hover {
+      border-radius: ${(props) => getLeftBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getRightBorderRadius({ isHovered: true, ...props })}
+      ${(props) => getLeftBorderRadius({ isHovered: true, ...props })};
+    }
   }
 
   &,

package/components/Tabs/Tab/styles.js

@@ -1,4 +1,5 @@
 import Tab from '@mui/material/Tab';
+import { HOVER_MEDIA } from '../../constants';
 import { styled } from '../../styled';
 export const StyledTab = styled(Tab) `
   min-height: 36px;
@@ -13,8 +14,10 @@ export const StyledTab = styled(Tab) `
     margin-right: 0;
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary[800]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
   }
 
   &:active {

package/components/ToggleButton/styles.js

@@ -2,6 +2,7 @@ import { buttonBaseClasses } from '@mui/material/ButtonBase';
 import MuiToggleButton, { toggleButtonClasses, } from '@mui/material/ToggleButton';
 import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
 import { buttonClasses } from '../Button';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../constants';
 import { css, styled } from '../styled';
 import { SIZES } from './constants';
 const getSize = (size) => {
@@ -64,23 +65,33 @@ export const StyledToggleButton = styled(MuiToggleButton, {
   
   ${({ theme, $color, disabled, $variant }) => toggleButtonColorStyle({ theme, color: $color, disabled, variant: $variant })}
 
-  &:hover {
-    ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};
+  ${HOVER_MEDIA} {
+    &:hover {
+      ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};
+    }
   }
-  
+
   &:active {
     z-index: 3;
 
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'active' })};
   }
-  
+
   &.${toggleButtonClasses.selected} {
     z-index: 2;
 
     ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, selected: true })}
 
-    &:hover {
-      ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'hover' })};
+    ${HOVER_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'hover' })};
+      }
+    }
+    
+    ${HOVER_NONE_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'default' })};
+      }
     }
     
     &:active {
@@ -97,8 +108,10 @@ export const StyledToggleButton = styled(MuiToggleButton, {
   &.${buttonBaseClasses.root}.${toggleButtonGroupClasses.grouped}:not(:first-of-type) {
      border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color })};
 
-    &:hover {
-      border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'hover' })};
+    ${HOVER_MEDIA} {
+      &:hover {
+        border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'hover' })};
+      }
     }
 
     &:active {
@@ -108,13 +121,15 @@ export const StyledToggleButton = styled(MuiToggleButton, {
     &.${toggleButtonClasses.selected} {
       border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, isSelected: true })};
 
-      &:hover {
-        border-left-color: ${({ theme, $color }) => getBorderColor({
+      ${HOVER_MEDIA} {
+        &:hover {
+          border-left-color: ${({ theme, $color }) => getBorderColor({
     theme,
     color: $color,
     isSelected: true,
     state: 'hover',
 })};
+        }
       }
 
       &:active {

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/styles.js

@@ -106,10 +106,10 @@ export const BackButton = styled(IconButton) `
       width: ${COLLAPSE_BUTTON_WIDTH};
       height: ${COLLAPSE_BUTTON_WIDTH};
     }
-
-    &:hover {
+    
+    &:active {
       background-color: transparent;
-    }
+    } 
   }
 `;
 export const ParentContent = styled.div `

package/components/Tree/TreeItem/styles.js

@@ -2,6 +2,7 @@ import { typographyClasses } from '@mui/material/Typography';
 import { ChevronROutlineMd } from '../../../icons/ChevronROutlineMd';
 import { buttonClasses } from '../../Button';
 import { Collapse } from '../../Collapse';
+import { HOVER_MEDIA } from '../../constants';
 import { descriptionClassnames } from '../../Description';
 import { IconButton } from '../../IconButton';
 import { OverflowTypography } from '../../OverflowTypography';
@@ -66,14 +67,22 @@ export const ItemContent = styled('div') `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &.${treeClassnames.selected} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
 
-    &:hover, &:focus {
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
+    }
+
+    &:focus {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }
   }
@@ -83,7 +92,13 @@ export const ItemContent = styled('div') `
 
     color: ${({ theme }) => theme.palette.text.disabled};
 
-    &:hover, &:focus {
+    ${HOVER_MEDIA} {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:focus {
       background-color: transparent;
     }
   }
@@ -137,8 +152,10 @@ export const CollapseButton = styled(IconButton) `
     height: ${COLLAPSE_BUTTON_WIDTH};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 
   &.${treeClassnames.open} .${svgIconClassnames.root} {
@@ -167,10 +184,6 @@ export const CollapseButton = styled(IconButton) `
       width: ${MOBILE_COLLAPSE_BUTTON_WIDTH};
       height: auto;
     }
-
-    &:hover {
-      background-color: transparent;
-    }
   }
 `;
 export const ChevronIcon = styled(ChevronROutlineMd) `

package/components/constants/index.d.ts

@@ -2,3 +2,4 @@ export * from './date';
 export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
+export * from './media';

package/components/constants/index.js

@@ -2,3 +2,4 @@ export * from './date';
 export * from './scrollbar';
 export * from './footer';
 export * from './classnames';
+export * from './media';

package/components/constants/media.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Медиа-выражение проверяющее что устройство поддерживает hover и является точным указателем
+ */
+export declare const HOVER_MEDIA = "@media (hover: hover) and (pointer: fine)";
+/**
+ * Медиа-выражение проверяющее что устройство не поддерживает hover
+ */
+export declare const HOVER_NONE_MEDIA = "@media (hover: none)";

package/components/constants/media.js

@@ -0,0 +1,8 @@
+/**
+ * Медиа-выражение проверяющее что устройство поддерживает hover и является точным указателем
+ */
+export const HOVER_MEDIA = '@media (hover: hover) and (pointer: fine)';
+/**
+ * Медиа-выражение проверяющее что устройство не поддерживает hover
+ */
+export const HOVER_NONE_MEDIA = '@media (hover: none)';

package/components/theme/components/MuiButton.js

@@ -1,5 +1,6 @@
 import { buttonClasses } from '@mui/material/Button';
 import { ButtonSizes, ButtonStates, ButtonVariants, buttonClassnames, } from '../../Button';
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 import { svgIconClassnames } from '../../SvgIcon';
 /**
  * Вспомогательная утилита для получения значения из values
@@ -366,29 +367,51 @@ export const MuiButton = {
                     buttonState: ButtonStates.Default,
                 }),
                 borderRadius: theme.shape.medium,
-                '&:hover': {
-                    color: getButtonColor({
-                        selected,
-                        theme,
-                        variant,
-                        color,
-                        buttonState: ButtonStates.Hover,
-                    }),
-                    backgroundColor: getButtonBackgroundColor({
-                        selected,
-                        color,
-                        variant,
-                        theme,
-                        buttonState: ButtonStates.Hover,
-                    }),
-                    boxShadow: 'none',
-                    border: getBorder({
-                        theme,
-                        variant,
-                        color,
-                        buttonState: ButtonStates.Hover,
-                        selected,
-                    }),
+                // Переопределяем media наследованное от Mui
+                [HOVER_NONE_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: getButtonBackgroundColor({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: ButtonStates.Default,
+                        }),
+                        boxShadow: 'unset',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Default,
+                            selected,
+                        }),
+                    },
+                },
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        color: getButtonColor({
+                            selected,
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Hover,
+                        }),
+                        backgroundColor: getButtonBackgroundColor({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: ButtonStates.Hover,
+                        }),
+                        boxShadow: 'none',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: ButtonStates.Hover,
+                            selected,
+                        }),
+                    },
                 },
                 '&:active': {
                     color: getButtonColor({

package/components/theme/components/MuiListItemButton.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA, HOVER_NONE_MEDIA } from '../../constants';
 export const MuiListItemButton = {
     styleOverrides: {
         root({ theme }) {
@@ -6,9 +7,16 @@ export const MuiListItemButton = {
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],
                     backgroundColor: theme.palette.grey[200],
+                    [HOVER_NONE_MEDIA]: {
+                        '&:hover': {
+                            backgroundColor: theme.palette.grey[200],
+                        },
+                    },
                 },
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
             };
         },

package/components/theme/components/MuiMenuItem.js

@@ -1,11 +1,14 @@
 import { menuItemClasses } from '@mui/material/MenuItem';
+import { HOVER_MEDIA } from '../../constants';
 export const MuiMenuItem = {
     styleOverrides: {
         root({ theme }) {
             return {
                 padding: theme.spacing(2, 2, 2, 3),
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
                 [`&.${menuItemClasses.selected}`]: {
                     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0, ${theme.palette.primary.main} 3px, ${theme.palette.primary['100']} 3px)`,

package/components/theme/components/MuiOutlinedInput.js

@@ -1,3 +1,4 @@
+import { HOVER_MEDIA } from '../../constants';
 export const MuiOutlinedInput = {
     defaultProps: {
         notched: false,
@@ -10,28 +11,30 @@ export const MuiOutlinedInput = {
                 color: theme.palette.grey[900],
                 background: theme.palette.background.element,
                 padding: theme.microSpacing(1, 0),
-                '&:hover': {
-                    background: theme.palette.background.elementHover,
+                [HOVER_MEDIA]: {
+                    '&:hover': {
+                        background: theme.palette.background.elementHover,
+                    },
+                    '&:hover .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.grey[800],
+                        transition: theme.transitions.create(['border-color'], {
+                            easing: theme.transitions.easing.easeIn,
+                            duration: theme.transitions.duration.shortest,
+                        }),
+                    },
+                    '&.Mui-error:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {
+                        borderColor: theme.palette.error[900],
+                    },
                 },
                 '&.Mui-disabled': {
                     backgroundColor: theme.palette.components.disabled,
                 },
-                '&:hover .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.grey[800],
-                    transition: theme.transitions.create(['border-color'], {
-                        easing: theme.transitions.easing.easeIn,
-                        duration: theme.transitions.duration.shortest,
-                    }),
-                },
                 '&.Mui-disabled .MuiOutlinedInput-notchedOutline': {
                     border: 'none',
                 },
                 '&.Mui-error .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.error.dark,
                 },
-                '&.Mui-error:hover:not(.Mui-focused) .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error[900],
-                },
                 '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
                     borderColor: theme.palette.primary[700],
                     transition: 'none',