@astral/ui 4.101.0 → 4.102.0

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({

package/node/components/theme/components/MuiListItemButton.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiListItemButton = void 0;
+const constants_1 = require("../../constants");
 exports.MuiListItemButton = {
     styleOverrides: {
         root({ theme }) {
@@ -9,9 +10,16 @@ exports.MuiListItemButton = {
                 '&.Mui-selected': {
                     color: theme.palette.primary[800],
                     backgroundColor: theme.palette.grey[200],
+                    [constants_1.HOVER_NONE_MEDIA]: {
+                        '&:hover': {
+                            backgroundColor: theme.palette.grey[200],
+                        },
+                    },
                 },
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [constants_1.HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
             };
         },

package/node/components/theme/components/MuiMenuItem.js

@@ -2,13 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiMenuItem = void 0;
 const MenuItem_1 = require("@mui/material/MenuItem");
+const constants_1 = require("../../constants");
 exports.MuiMenuItem = {
     styleOverrides: {
         root({ theme }) {
             return {
                 padding: theme.spacing(2, 2, 2, 3),
-                '&:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
+                [constants_1.HOVER_MEDIA]: {
+                    '&:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                    },
                 },
                 [`&.${MenuItem_1.menuItemClasses.selected}`]: {
                     background: `linear-gradient(90deg, ${theme.palette.primary.main} 0, ${theme.palette.primary.main} 3px, ${theme.palette.primary['100']} 3px)`,

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

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiOutlinedInput = void 0;
+const constants_1 = require("../../constants");
 exports.MuiOutlinedInput = {
     defaultProps: {
         notched: false,
@@ -13,28 +14,30 @@ exports.MuiOutlinedInput = {
                 color: theme.palette.grey[900],
                 background: theme.palette.background.element,
                 padding: theme.microSpacing(1, 0),
-                '&:hover': {
-                    background: theme.palette.background.elementHover,
+                [constants_1.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',

package/node/components/theme/components/MuiSwitch.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiSwitch = void 0;
+const constants_1 = require("../../constants");
 const prepareColorToUrl = (color) => color.replace('#', '%23');
 const getCheckBackgroundImage = (color) => {
     const preparedColor = prepareColorToUrl(color);
@@ -33,13 +34,15 @@ exports.MuiSwitch = {
                         opacity: 1,
                     },
                 },
-                // CHECKED HOVER
-                '& .Mui-checked:hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.primary[700],
-                },
-                // NOT CHECKED HOVER
-                '& :not(.Mui-checked):hover + .MuiSwitch-track': {
-                    backgroundColor: theme.palette.grey[600],
+                [constants_1.HOVER_MEDIA]: {
+                    // CHECKED HOVER
+                    '& .Mui-checked:hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.primary[700],
+                    },
+                    // NOT CHECKED HOVER
+                    '& :not(.Mui-checked):hover + .MuiSwitch-track': {
+                        backgroundColor: theme.palette.grey[600],
+                    },
                 },
                 // DISABLED TRACK
                 '& .MuiButtonBase-root.MuiSwitch-switchBase.Mui-disabled': {
@@ -61,8 +64,10 @@ exports.MuiSwitch = {
         },
         switchBase: {
             padding: 0,
-            '&:hover, &.Mui-checked:hover': {
-                backgroundColor: 'transparent',
+            [constants_1.HOVER_MEDIA]: {
+                '&:hover, &.Mui-checked:hover': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
         track({ theme }) {

package/node/components/theme/components/MuiTableRow.js

@@ -1,13 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuiTableRow = void 0;
+const constants_1 = require("../../constants");
 exports.MuiTableRow = {
     styleOverrides: {
         root({ theme }) {
             return {
-                '&.MuiTableRow-hover:hover': {
-                    backgroundColor: theme.palette.background.elementHover,
-                    cursor: 'pointer',
+                [constants_1.HOVER_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: theme.palette.background.elementHover,
+                        cursor: 'pointer',
+                    },
+                },
+                [constants_1.HOVER_NONE_MEDIA]: {
+                    '&.MuiTableRow-hover:hover': {
+                        backgroundColor: 'transparent',
+                    },
                 },
                 '&.Mui-selected': {
                     backgroundColor: theme.palette.primary['100'],

package/package.json

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