@astral/ui 4.100.0 → 4.102.0

package/node/components/PageAsideNavigation/PageAsideNavigationItem/styles.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.Wrapper = void 0;
-const constants_1 = require("../../SvgIcon/constants");
+const constants_1 = require("../../constants");
+const constants_2 = require("../../SvgIcon/constants");
 const styled_1 = require("../../styled");
-const constants_2 = require("./constants");
+const constants_3 = require("./constants");
 exports.Wrapper = styled_1.styled.li `
   cursor: pointer;
 
   height: 44px;
 
-  & .${constants_2.pageAsideNavigationItemClassnames.root} {
+  & .${constants_3.pageAsideNavigationItemClassnames.root} {
     cursor: pointer;
     
     position: relative;
@@ -36,8 +37,10 @@ exports.Wrapper = styled_1.styled.li `
       color: ${({ theme }) => theme.palette.grey[800]};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.primary[800]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.primary[800]};
+      }
     }
 
     &:active {
@@ -45,7 +48,7 @@ exports.Wrapper = styled_1.styled.li `
     }
   }
 
-  & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+  & .${constants_3.pageAsideNavigationItemClassnames.isActive} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
 
     &::before {
@@ -65,7 +68,7 @@ exports.Wrapper = styled_1.styled.li `
     height: 40px;
     -webkit-tap-highlight-color: transparent;
     
-    & .${constants_2.pageAsideNavigationItemClassnames.root} {
+    & .${constants_3.pageAsideNavigationItemClassnames.root} {
       box-sizing: border-box;
       height: inherit;
       padding: ${({ theme }) => theme.microSpacing(5, 6)};
@@ -76,10 +79,6 @@ exports.Wrapper = styled_1.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]};
@@ -88,7 +87,7 @@ exports.Wrapper = styled_1.styled.li `
       }
     }
 
-    & .${constants_2.pageAsideNavigationItemClassnames.isActive} {
+    & .${constants_3.pageAsideNavigationItemClassnames.isActive} {
       background-color: ${({ theme }) => theme.palette.grey[100]};
       border-color: ${({ theme }) => theme.palette.grey[800]};
 
@@ -105,7 +104,7 @@ exports.Wrapper = styled_1.styled.li `
 exports.IconWrapper = styled_1.styled.div `
   display: flex;
 
-  & .${constants_1.svgIconClassnames.root} {
+  & .${constants_2.svgIconClassnames.root} {
     width: 20px;
     height: 20px;
   }

package/node/components/PageHeader/MobilePageActions/styles.js

@@ -66,10 +66,6 @@ exports.ShowMoreButton = (0, styled_1.styled)(Button_1.default) `
     height: 40px;
     min-height: 40px;
     padding: 0;
-
-    &:hover {
-      background-color: unset;
-    }
   }
 `;
 exports.StyledCollapse = (0, styled_1.styled)(Collapse_1.default) `

package/node/components/Radio/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.IconWrapper = exports.Input = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
     if (isDisabled) {
         return isChecked
@@ -35,14 +36,14 @@ const getFillColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
 exports.Wrapper = (0, styled_1.styled)('span', {
     shouldForwardProp: (prop) => !['$isDisabled', '$isError', '$isChecked'].includes(prop),
 }) `
-  .${constants_1.radioClassnames.dot} {
+  .${constants_2.radioClassnames.dot} {
     transform-origin: center;
     transform: ${({ $isChecked }) => ($isChecked ? 'scale(1)' : 'scale(0)')};
 
     ${mixins_1.easeOutBackTransition};
   }
   
-  .${constants_1.radioClassnames.outerCircle} {
+  .${constants_2.radioClassnames.outerCircle} {
     fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
     theme,
     isHover: false,
@@ -61,22 +62,24 @@ exports.Wrapper = (0, styled_1.styled)('span', {
     ${mixins_1.easeOutBackTransition}; 
   }
 
-  &:hover {    
-    .${constants_1.radioClassnames.outerCircle} {
-      fill: ${({ theme, $isDisabled, $isError, $isChecked }) => getFillColor({
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      .${constants_2.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,
 })};
+      }
     }
   }
 `;
@@ -85,19 +88,19 @@ exports.Input = styled_1.styled.input `
   
   position: absolute;
 
-  width: ${constants_1.RADIO_SIZE};
-  height: ${constants_1.RADIO_SIZE};
+  width: ${constants_2.RADIO_SIZE};
+  height: ${constants_2.RADIO_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_RADIO_SIZE};
-    height: ${constants_1.MOBILE_RADIO_SIZE};
+    width: ${constants_2.MOBILE_RADIO_SIZE};
+    height: ${constants_2.MOBILE_RADIO_SIZE};
   }
 
   &:focus-visible {
-    ~.${constants_1.radioClassnames.iconWrapper} > .${constants_1.radioClassnames.icon} {
+    ~.${constants_2.radioClassnames.iconWrapper} > .${constants_2.radioClassnames.icon} {
       border-radius: ${({ theme }) => theme.shape.medium};
       outline: 2px solid ${({ theme }) => theme.palette.components.focused};
       outline-offset: -2px;
@@ -109,14 +112,14 @@ exports.IconWrapper = styled_1.styled.span `
   align-items: center;
   justify-content: center;
 
-  width: ${constants_1.RADIO_SIZE};
-  height: ${constants_1.RADIO_SIZE};
+  width: ${constants_2.RADIO_SIZE};
+  height: ${constants_2.RADIO_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('mobile')} {
-    width: ${constants_1.MOBILE_RADIO_SIZE};
-    height: ${constants_1.MOBILE_RADIO_SIZE};
+    width: ${constants_2.MOBILE_RADIO_SIZE};
+    height: ${constants_2.MOBILE_RADIO_SIZE};
 
-    .${constants_1.radioClassnames.icon} {
+    .${constants_2.radioClassnames.icon} {
       width: 20px;
       height: 20px;
     }

package/node/components/RadioCard/styles.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledRadio = exports.Content = exports.Wrapper = void 0;
+const constants_1 = require("../constants");
 const Radio_1 = require("../Radio");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Wrapper = styled_1.styled.label `
   cursor: pointer;
 
@@ -62,14 +63,16 @@ exports.Wrapper = styled_1.styled.label `
       outline-offset: -2px;
     `}
 
-  & .${Radio_1.radioClassnames.disabled} ~ .${constants_1.radioCardClassnames.content} {
+  & .${Radio_1.radioClassnames.disabled} ~ .${constants_2.radioCardClassnames.content} {
     cursor: default;
   }
 
-  &:hover {
-    background-color: ${({ theme, $isDisabled }) => $isDisabled
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, $isDisabled }) => $isDisabled
     ? theme.palette.background.element
     : theme.palette.background.elementHover};
+    }
   }
 `;
 exports.Content = styled_1.styled.div `

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StaticCalendarGridButton = void 0;
 const Button_1 = require("@mui/material/Button");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 const StaticCalendarButton_1 = require("../StaticCalendarButton");
 const utils_1 = require("./utils");
@@ -56,11 +57,13 @@ exports.StaticCalendarGridButton = (0, styled_1.styled)(StaticCalendarButton_1.S
     background-color: currentColor;
   }
   
-  &:hover {
-    border-radius: ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
-    ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      border-radius: ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getRightBorderRadius)({ isHovered: true, ...props })}
+      ${(props) => (0, utils_1.getLeftBorderRadius)({ isHovered: true, ...props })};
+    }
   }
 
   &,

package/node/components/Tabs/Tab/styles.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTab = void 0;
 const Tab_1 = __importDefault(require("@mui/material/Tab"));
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
   min-height: 36px;
@@ -19,8 +20,10 @@ exports.StyledTab = (0, styled_1.styled)(Tab_1.default) `
     margin-right: 0;
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary[800]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary[800]};
+    }
   }
 
   &:active {

package/node/components/ToggleButton/styles.js

@@ -28,10 +28,11 @@ const ButtonBase_1 = require("@mui/material/ButtonBase");
 const ToggleButton_1 = __importStar(require("@mui/material/ToggleButton"));
 const ToggleButtonGroup_1 = require("@mui/material/ToggleButtonGroup");
 const Button_1 = require("../Button");
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getSize = (size) => {
-    return constants_1.SIZES[size || 'medium'];
+    return constants_2.SIZES[size || 'medium'];
 };
 const getColor = ({ color = 'primary', isSelected, state = 'default', theme, isDisabled, }) => {
     if (isDisabled) {
@@ -90,23 +91,33 @@ exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
   
   ${({ theme, $color, disabled, $variant }) => toggleButtonColorStyle({ theme, color: $color, disabled, variant: $variant })}
 
-  &:hover {
-    ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, disabled, state: 'hover' })};
+  ${constants_1.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' })};
   }
-  
+
   &.${ToggleButton_1.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' })};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'hover' })};
+      }
+    }
+    
+    ${constants_1.HOVER_NONE_MEDIA} {
+      &:hover {
+        ${({ theme, $color, disabled }) => toggleButtonColorStyle({ theme, color: $color, selected: true, disabled, state: 'default' })};
+      }
     }
     
     &:active {
@@ -123,8 +134,10 @@ exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
   &.${ButtonBase_1.buttonBaseClasses.root}.${ToggleButtonGroup_1.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' })};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, state: 'hover' })};
+      }
     }
 
     &:active {
@@ -134,13 +147,15 @@ exports.StyledToggleButton = (0, styled_1.styled)(ToggleButton_1.default, {
     &.${ToggleButton_1.toggleButtonClasses.selected} {
       border-left-color: ${({ theme, $color }) => getBorderColor({ theme, color: $color, isSelected: true })};
 
-      &:hover {
-        border-left-color: ${({ theme, $color }) => getBorderColor({
+      ${constants_1.HOVER_MEDIA} {
+        &:hover {
+          border-left-color: ${({ theme, $color }) => getBorderColor({
     theme,
     color: $color,
     isSelected: true,
     state: 'hover',
 })};
+        }
       }
 
       &:active {

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

@@ -109,10 +109,10 @@ exports.BackButton = (0, styled_1.styled)(IconButton_1.IconButton) `
       width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
       height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
     }
-
-    &:hover {
+    
+    &:active {
       background-color: transparent;
-    }
+    } 
   }
 `;
 exports.ParentContent = styled_1.styled.div `

package/node/components/Tree/TreeItem/styles.js

@@ -5,6 +5,7 @@ const Typography_1 = require("@mui/material/Typography");
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
 const Button_1 = require("../../Button");
 const Collapse_1 = require("../../Collapse");
+const constants_1 = require("../../constants");
 const Description_1 = require("../../Description");
 const IconButton_1 = require("../../IconButton");
 const OverflowTypography_1 = require("../../OverflowTypography");
@@ -12,7 +13,7 @@ const SvgIcon_1 = require("../../SvgIcon");
 const styled_1 = require("../../styled");
 const Tooltip_1 = require("../../Tooltip");
 const Typography_2 = require("../../Typography");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.Item = (0, styled_1.styled)('li', {
     shouldForwardProp: (prop) => !['as'].includes(prop),
 }) `
@@ -28,8 +29,8 @@ exports.Item = (0, styled_1.styled)('li', {
     top: 0;
     transform: translateX(
       calc(
-        ((${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * var(--tree-item-level)) -
-          ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH}
+        ((${constants_2.COLLAPSE_BUTTON_WIDTH} + ${constants_2.GAP_WIDTH}) * var(--tree-item-level)) -
+          ${constants_2.HALF_PADDING_COLLAPSE_BUTTON_WIDTH}
       )
     );
 
@@ -69,24 +70,38 @@ exports.ItemContent = (0, styled_1.styled)('div') `
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
-  &.${constants_1.treeClassnames.selected} {
+  &.${constants_2.treeClassnames.selected} {
     background-color: ${({ theme }) => theme.palette.primary[100]};
 
-    &:hover, &:focus {
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
+    }
+
+    &:focus {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }
   }
 
-  &.${constants_1.treeClassnames.disabled} {
+  &.${constants_2.treeClassnames.disabled} {
     cursor: default;
 
     color: ${({ theme }) => theme.palette.text.disabled};
 
-    &:hover, &:focus {
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: transparent;
+      }
+    }
+
+    &:focus {
       background-color: transparent;
     }
   }
@@ -103,7 +118,7 @@ exports.ItemContent = (0, styled_1.styled)('div') `
     border-bottom: 1px solid ${({ theme }) => theme.palette.components.border.default};
 
     
-    &.${constants_1.treeClassnames.hasNested} {
+    &.${constants_2.treeClassnames.hasNested} {
       padding-right: ${({ theme }) => theme.spacing(11)};
     }
 
@@ -120,31 +135,33 @@ exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
   position: relative;
   z-index: 1;
 
-  width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
-  height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
-  margin-left: -${constants_1.COLLAPSE_BUTTON_WIDTH};
+  width: ${constants_2.COLLAPSE_BUTTON_WIDTH};
+  height: ${constants_2.COLLAPSE_BUTTON_WIDTH};
+  margin-left: -${constants_2.COLLAPSE_BUTTON_WIDTH};
 
   color: inherit;
 
-  &.${constants_1.treeClassnames.notBlockingExpandList} {
+  &.${constants_2.treeClassnames.notBlockingExpandList} {
     color: ${({ theme }) => theme.palette.text.primary};
   }
 
   &.${Button_1.buttonClasses.root} {
-    width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
-    height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
+    width: ${constants_2.COLLAPSE_BUTTON_WIDTH};
+    height: ${constants_2.COLLAPSE_BUTTON_WIDTH};
   }
 
   &.${Button_1.buttonClasses.root} .${SvgIcon_1.svgIconClassnames.root} {
-    width: ${constants_1.COLLAPSE_BUTTON_WIDTH};
-    height: ${constants_1.COLLAPSE_BUTTON_WIDTH};
+    width: ${constants_2.COLLAPSE_BUTTON_WIDTH};
+    height: ${constants_2.COLLAPSE_BUTTON_WIDTH};
   }
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.grey[300]};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.grey[300]};
+    }
   }
 
-  &.${constants_1.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
+  &.${constants_2.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
     transform: rotateZ(90deg);
   }
 
@@ -155,25 +172,21 @@ exports.CollapseButton = (0, styled_1.styled)(IconButton_1.IconButton) `
     right: 0;
     bottom: 0;
 
-    width: ${constants_1.MOBILE_COLLAPSE_BUTTON_WIDTH};
+    width: ${constants_2.MOBILE_COLLAPSE_BUTTON_WIDTH};
     height: auto;
     margin-left: 0;
     padding: ${({ theme }) => theme.spacing(0, 4, 0, 8)};
 
     border-radius: 0;
 
-    &.${constants_1.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
+    &.${constants_2.treeClassnames.open} .${SvgIcon_1.svgIconClassnames.root} {
       transform: rotateZ(0deg);
     }
 
     &.${Button_1.buttonClasses.root} {
-      width: ${constants_1.MOBILE_COLLAPSE_BUTTON_WIDTH};
+      width: ${constants_2.MOBILE_COLLAPSE_BUTTON_WIDTH};
       height: auto;
     }
-
-    &:hover {
-      background-color: transparent;
-    }
   }
 `;
 exports.ChevronIcon = (0, styled_1.styled)(ChevronROutlineMd_1.ChevronROutlineMd) `
@@ -204,11 +217,11 @@ exports.LabelWrapper = styled_1.styled.div `
     z-index: 1;
     top: 0;
     left: calc(
-      ${constants_1.HALF_PADDING_COLLAPSE_BUTTON_WIDTH} -
-        (${constants_1.COLLAPSE_BUTTON_WIDTH} + ${constants_1.GAP_WIDTH}) * 2
+      ${constants_2.HALF_PADDING_COLLAPSE_BUTTON_WIDTH} -
+        (${constants_2.COLLAPSE_BUTTON_WIDTH} + ${constants_2.GAP_WIDTH}) * 2
     );
 
-    width: ${constants_1.TREE_LINE_WIDTH};
+    width: ${constants_2.TREE_LINE_WIDTH};
 
     /* Добавляем к высоте половину нижнего отступа, который не входит в высоту текущего элемента */
     height: ${({ theme }) => `calc(50% + ${theme.spacing(1)}/2)`};

package/node/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/node/components/constants/index.js

@@ -18,3 +18,4 @@ __exportStar(require("./date"), exports);
 __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./footer"), exports);
 __exportStar(require("./classnames"), exports);
+__exportStar(require("./media"), exports);

package/node/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/node/components/constants/media.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HOVER_NONE_MEDIA = exports.HOVER_MEDIA = void 0;
+/**
+ * Медиа-выражение проверяющее что устройство поддерживает hover и является точным указателем
+ */
+exports.HOVER_MEDIA = '@media (hover: hover) and (pointer: fine)';
+/**
+ * Медиа-выражение проверяющее что устройство не поддерживает hover
+ */
+exports.HOVER_NONE_MEDIA = '@media (hover: none)';

package/node/components/theme/components/MuiButton.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiButton = exports.getButtonDisabledBackgroundColor = exports.getButtonBackgroundColor = exports.getButtonPaddingMobile = exports.getButtonPadding = exports.getButtonHeightMobile = exports.getButtonHeight = void 0;
 const Button_1 = require("@mui/material/Button");
 const Button_2 = require("../../Button");
+const constants_1 = require("../../constants");
 const SvgIcon_1 = require("../../SvgIcon");
 /**
  * Вспомогательная утилита для получения значения из values
@@ -375,29 +376,51 @@ exports.MuiButton = {
                     buttonState: Button_2.ButtonStates.Default,
                 }),
                 borderRadius: theme.shape.medium,
-                '&:hover': {
-                    color: getButtonColor({
-                        selected,
-                        theme,
-                        variant,
-                        color,
-                        buttonState: Button_2.ButtonStates.Hover,
-                    }),
-                    backgroundColor: (0, exports.getButtonBackgroundColor)({
-                        selected,
-                        color,
-                        variant,
-                        theme,
-                        buttonState: Button_2.ButtonStates.Hover,
-                    }),
-                    boxShadow: 'none',
-                    border: getBorder({
-                        theme,
-                        variant,
-                        color,
-                        buttonState: Button_2.ButtonStates.Hover,
-                        selected,
-                    }),
+                // Переопределяем media наследованное от Mui
+                [constants_1.HOVER_NONE_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: (0, exports.getButtonBackgroundColor)({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: Button_2.ButtonStates.Default,
+                        }),
+                        boxShadow: 'unset',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: Button_2.ButtonStates.Default,
+                            selected,
+                        }),
+                    },
+                },
+                [constants_1.HOVER_MEDIA]: {
+                    '&:hover': {
+                        color: getButtonColor({
+                            selected,
+                            theme,
+                            variant,
+                            color,
+                            buttonState: Button_2.ButtonStates.Hover,
+                        }),
+                        backgroundColor: (0, exports.getButtonBackgroundColor)({
+                            selected,
+                            color,
+                            variant,
+                            theme,
+                            buttonState: Button_2.ButtonStates.Hover,
+                        }),
+                        boxShadow: 'none',
+                        border: getBorder({
+                            theme,
+                            variant,
+                            color,
+                            buttonState: Button_2.ButtonStates.Hover,
+                            selected,
+                        }),
+                    },
                 },
                 '&:active': {
                     color: getButtonColor({