@astral/ui 4.101.0 → 4.103.0

package/node/components/Onboarding/types/step.d.ts

@@ -45,7 +45,7 @@ export type Step = {
      */
     type: StepType;
     /**
-     * Желаемая позиция popover (только для highlight).
+     * Желаемая позиция popover относительно подсвечиваемого элемента (только для highlight).
      * @default 'bottom'
      */
     position?: StepPosition;

package/node/components/Onboarding/ui/StepStrategy/steps/HighlightStep/styles.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "hasArrow" | "disableMobileDrawer"> & {
+export declare const StepPopover: import("@emotion/styled/dist/declarations/src/types").StyledComponent<Omit<import("../../../../../NewPopover").NewPopoverProps, "title" | "disableMobileDrawer" | "hasArrow"> & {
     variant?: import("../../../../../HintPopover").HintPopoverVariant | undefined;
     title?: import("react").ReactNode;
     action?: import("react").ReactNode;

package/node/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/StandaloneStep.js

@@ -10,6 +10,6 @@ const styles_1 = require("./styles");
  */
 const StandaloneStep = ({ activeStep, isClosing, }) => {
     const { step, isConfirming, requestClose } = activeStep;
-    return ((0, jsx_runtime_1.jsxs)(styles_1.StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: step.content }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.StepDialog, { open: !isConfirming && !isClosing, title: step.title, onClose: requestClose, size: step.dialogSize, disableAutoFocus: true, disableMobileDrawer: true, children: [(0, jsx_runtime_1.jsx)(DialogContent_1.DialogContent, { children: step.content }), (0, jsx_runtime_1.jsx)(styles_1.Footer, { children: (0, jsx_runtime_1.jsx)(StepFooter_1.StepFooter, { activeStep: activeStep }) })] }));
 };
 exports.StandaloneStep = StandaloneStep;

package/node/components/Onboarding/ui/StepStrategy/steps/StandaloneStep/styles.d.ts

@@ -4,6 +4,7 @@ export declare const StepDialog: import("@emotion/styled/dist/declarations/src/t
     disableBackdropClick?: boolean | undefined;
     size?: import("../../../../../Dialog").DialogSize | undefined;
     headerContent?: import("react").ReactNode;
+    disableMobileDrawer?: boolean | undefined;
 } & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;

package/node/components/Onboarding/ui/hooks/useTrackedRect/constants.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+export declare const TRACKING_IDLE_TIMEOUT_MS = 300;

package/node/components/Onboarding/ui/hooks/useTrackedRect/constants.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TRACKING_IDLE_TIMEOUT_MS = void 0;
+/**
+ * Сколько миллисекунд без изменений области считать покоем и останавливать
+ * отслеживание по кадрам. Перекрывает длительность анимаций MUI, чтобы
+ * отслеживание не выключилось в паузе перед стартом анимации.
+ */
+exports.TRACKING_IDLE_TIMEOUT_MS = 300;

package/node/components/Onboarding/ui/hooks/useTrackedRect/useTrackedRect.js

@@ -4,6 +4,7 @@ exports.useTrackedRect = void 0;
 const react_1 = require("react");
 const geometry_1 = require("../../../utils/geometry");
 const getScrollParents_1 = require("../../../utils/getScrollParents");
+const constants_1 = require("./constants");
 /**
  * Отслеживает область элемента для hole overlay и якоря popover.
  */
@@ -14,32 +15,53 @@ const useTrackedRect = (element) => {
             setRect(null);
             return;
         }
-        // ID текущей рAF-очереди обновления.
+        // ID кадра активного отслеживания, 0 — отслеживание остановлено.
         let frame = 0;
+        let lastChangeTime = 0;
+        let lastRect = null;
         const scrollParents = (0, getScrollParents_1.getScrollParents)(element);
         const update = () => {
             const elementRect = (0, geometry_1.rectFromDomRect)(element.getBoundingClientRect());
             const viewport = (0, geometry_1.getViewport)();
             const next = (0, geometry_1.clampToScrollParents)(elementRect, scrollParents.map((parent) => (0, geometry_1.rectFromDomRect)(parent.getBoundingClientRect())), viewport);
-            setRect((prev) => ((0, geometry_1.isSameRect)(prev, next) ? prev : next));
+            if ((0, geometry_1.isSameRect)(lastRect, next)) {
+                return false;
+            }
+            lastRect = next;
+            setRect(next);
+            return true;
         };
-        const scheduleUpdate = () => {
-            cancelAnimationFrame(frame);
-            frame = requestAnimationFrame(update);
+        const track = () => {
+            if (update()) {
+                lastChangeTime = performance.now();
+            }
+            if (performance.now() - lastChangeTime >= constants_1.TRACKING_IDLE_TIMEOUT_MS) {
+                frame = 0;
+                return;
+            }
+            frame = requestAnimationFrame(track);
+        };
+        // Продлевает отслеживание, а если оно уже остановилось — запускает заново.
+        const scheduleTracking = () => {
+            lastChangeTime = performance.now();
+            if (!frame) {
+                frame = requestAnimationFrame(track);
+            }
         };
         update();
+        scheduleTracking();
         const scrollOptions = { passive: true };
-        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleUpdate, scrollOptions));
-        window.addEventListener('scroll', scheduleUpdate, scrollOptions);
-        window.addEventListener('resize', scheduleUpdate);
-        const resizeObserver = new ResizeObserver(scheduleUpdate);
+        scrollParents.forEach((parent) => parent.addEventListener('scroll', scheduleTracking, scrollOptions));
+        window.addEventListener('scroll', scheduleTracking, scrollOptions);
+        window.addEventListener('resize', scheduleTracking);
+        const resizeObserver = new ResizeObserver(scheduleTracking);
         resizeObserver.observe(element);
         return () => {
             cancelAnimationFrame(frame);
             resizeObserver.disconnect();
-            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleUpdate, scrollOptions));
-            window.removeEventListener('scroll', scheduleUpdate, scrollOptions);
-            window.removeEventListener('resize', scheduleUpdate);
+            scrollParents.forEach((parent) => parent.removeEventListener('scroll', scheduleTracking, scrollOptions));
+            window.removeEventListener('scroll', scheduleTracking, scrollOptions);
+            window.removeEventListener('resize', scheduleTracking);
         };
     }, [element]);
     return rect;

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 `