@astral/ui 4.101.0 → 4.103.0

package/node/components/JsonViewer/JsonNode/styles.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chevron = exports.IconWrapper = exports.NodeContainer = void 0;
 const ChevronROutlineMd_1 = require("../../../icons/ChevronROutlineMd");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled");
 exports.NodeContainer = (0, styled_1.styled)('dl', {
     shouldForwardProp: (prop) => prop !== 'level' && prop !== 'isExpandable',
@@ -24,8 +25,10 @@ exports.NodeContainer = (0, styled_1.styled)('dl', {
     duration: theme.transitions.duration.shortest,
 })};
 
-  &:hover {
-    background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme, isExpandable }) => isExpandable ? theme.palette.background.elementHover : 'transparent'};
+    }
   }
 `;
 exports.IconWrapper = (0, styled_1.styled)('div', {

package/node/components/Link/styles.js

@@ -5,9 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledLink = void 0;
 const Link_1 = __importDefault(require("@mui/material/Link"));
+const constants_1 = require("../constants");
 const SvgIcon_1 = require("../SvgIcon");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
   display: inline-flex;
   gap: ${({ theme }) => theme.spacing(1)};
@@ -22,26 +23,30 @@ exports.StyledLink = (0, styled_1.styled)(Link_1.default) `
     color: ${({ theme }) => theme.palette.components.link.visited};
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.components.link.hover};
-    text-decoration: underline;
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.components.link.hover};
+      text-decoration: underline;
+    }
   }
 
   &:active {
     color: ${({ theme }) => theme.palette.components.link.active};
   }
 
-  &.${constants_1.linkClassnames.isContrast} {
+  &.${constants_2.linkClassnames.isContrast} {
     color: ${({ theme }) => theme.palette.components.link.contrast.main};
 
     &:visited {
       color: ${({ theme }) => theme.palette.components.link.contrast.visited};
     }
 
-    &:hover {
-      color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        color: ${({ theme }) => theme.palette.components.link.contrast.hover};
+      }
     }
-    
+
     &:active {
       color: ${({ theme }) => theme.palette.components.link.contrast.active};
     }

package/node/components/ListItem/styles.js

@@ -5,8 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledListItem = exports.getColor = exports.getBgColor = void 0;
 const ListItem_1 = __importDefault(require("@mui/material/ListItem"));
+const constants_1 = require("../constants");
 const styled_1 = require("../styled");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 const getBgColor = ({ selected, theme, }) => {
     if (selected) {
         return theme.palette.grey[200];
@@ -18,10 +19,10 @@ const getColor = ({ theme, selected, listItemState, }) => {
     if (selected) {
         return theme.palette.primary[800];
     }
-    if (listItemState === constants_1.ListItemStates.Default) {
+    if (listItemState === constants_2.ListItemStates.Default) {
         return theme.palette.grey[900];
     }
-    if (listItemState === constants_1.ListItemStates.Hover) {
+    if (listItemState === constants_2.ListItemStates.Hover) {
         return theme.palette.primary[800];
     }
     return theme.palette.grey[900];
@@ -35,15 +36,17 @@ exports.StyledListItem = (0, styled_1.styled)(ListItem_1.default, {
 
   padding-left: ${({ theme }) => theme.spacing(3)};
 
-  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_1.ListItemStates.Default })};
+  color: ${(props) => (0, exports.getColor)({ ...props, listItemState: constants_2.ListItemStates.Default })};
 
   background-color: ${(props) => (0, exports.getBgColor)({ ...props })};
   border-radius: ${({ theme }) => theme.shape.small};
 
-  :hover {
-    color: ${(props) => (0, exports.getColor)({
+  ${constants_1.HOVER_MEDIA} {
+    :hover {
+      color: ${(props) => (0, exports.getColor)({
     ...props,
-    listItemState: constants_1.ListItemStates.Hover,
+    listItemState: constants_2.ListItemStates.Hover,
 })};
+    }
   }
 `;

package/node/components/MenuOrganization/OrganizationButton/styles.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledTypography = exports.Container = exports.StyledChevron = exports.StyledButton = void 0;
 const Button_1 = require("../../Button");
 const Chevron_1 = require("../../Chevron");
+const constants_1 = require("../../constants");
 const styled_1 = require("../../styled/styled");
 const Typography_1 = require("../../Typography");
 exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
@@ -16,8 +17,10 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
   text-align: left;
 
-  &:hover {
-    background-color: ${({ theme }) => theme.palette.background.elementHover};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      background-color: ${({ theme }) => theme.palette.background.elementHover};
+    }
   }
 
   &:active {
@@ -35,10 +38,6 @@ exports.StyledButton = (0, styled_1.styled)(Button_1.Button) `
 
     border-radius: 0;
 
-    &:hover {
-      background-color: initial;
-    }
-
     &:active {
       background-color: ${({ theme }) => theme.palette.primary[100]};
     }

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

@@ -4,13 +4,14 @@ exports.StyledPageDotOutlineMd = exports.EndAdornmentWrapper = exports.NavMenuIt
 const ListItemButton_1 = require("@mui/material/ListItemButton");
 const ChevronDOutlineMd_1 = require("../../../../icons/ChevronDOutlineMd");
 const PageDotOutlineMd_1 = require("../../../../icons/PageDotOutlineMd");
+const constants_1 = require("../../../constants");
 const ListItemButton_2 = require("../../../ListItemButton");
 const ListItemIcon_1 = require("../../../ListItemIcon");
 const OverflowTypography_1 = require("../../../OverflowTypography");
 const SvgIcon_1 = require("../../../SvgIcon");
 const styled_1 = require("../../../styled");
 const mixins_1 = require("../../../styled/mixins");
-const constants_1 = require("./constants");
+const constants_2 = require("./constants");
 exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemButton) `
   overflow: hidden;
 
@@ -36,23 +37,29 @@ exports.StyledListItemButton = (0, styled_1.styled)(ListItemButton_2.ListItemBut
       border-left: 3px solid ${({ theme }) => theme.palette.primary[800]};
     }
     
-    &:hover {
-      background-color: ${({ theme }) => theme.palette.primary[100]};
+    ${constants_1.HOVER_MEDIA} {
+      &:hover {
+        background-color: ${({ theme }) => theme.palette.primary[100]};
+      }
     }
 
-    &.${constants_1.navMenuItemButtonClassnames.hasGroup} {
+    &.${constants_2.navMenuItemButtonClassnames.hasGroup} {
       background-color: inherit;
 
-      &:hover {
-        background-color: inherit;
+      ${constants_1.HOVER_MEDIA} {
+        &:hover {
+          background-color: inherit;
+        }
       }
     }
   }
 
-  &:hover {
-    color: ${({ theme }) => theme.palette.primary['800']};
+  ${constants_1.HOVER_MEDIA} {
+    &:hover {
+      color: ${({ theme }) => theme.palette.primary['800']};
 
-    background-color: inherit;
+      background-color: inherit;
+    }
   }
 
   &:active {

package/node/components/NewPopover/NewPopover.js

@@ -26,6 +26,7 @@ const NewPopover = ({ children, onClose, isOpen, title, className, style, placem
         disableAutoFocus,
         hasArrow,
         disableMobileDrawer,
+        placement,
     });
     if (shouldRenderDrawer) {
         return ((0, jsx_runtime_1.jsx)(BottomDrawer_1.BottomDrawer, { title: title, onClose: handleClose, open: isOpened, className: className, style: style, ModalProps: {

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

@@ -18,6 +18,11 @@ export declare const ARROW_PADDING = 24;
 export declare const ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 export declare const ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+export declare const VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */

package/node/components/NewPopover/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_MODIFIERS = exports.ARROW_MIN_TRACK = exports.ARROW_MIN_PADDING = exports.ARROW_PADDING = exports.ARROW_HEIGHT = exports.ARROW_BASE = exports.popoverClassnames = void 0;
+exports.DEFAULT_MODIFIERS = exports.VIEWPORT_MIN_PADDING = exports.ARROW_MIN_TRACK = exports.ARROW_MIN_PADDING = exports.ARROW_PADDING = exports.ARROW_HEIGHT = exports.ARROW_BASE = exports.popoverClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.popoverClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('popover'),
@@ -21,12 +21,17 @@ exports.ARROW_PADDING = 24;
 exports.ARROW_MIN_PADDING = 16;
 /** Мин. «ход» стрелки вдоль кромки (px). */
 exports.ARROW_MIN_TRACK = 16;
+/**
+ * Мин. отступ popover от края вьюпорта (px).
+ * Наружу отдаётся CSS-переменной `--popover-viewport-padding`.
+ */
+exports.VIEWPORT_MIN_PADDING = 16;
 /**
  * Базовые модификаторы Popper.js. У MUI Popper (popper.js)
  */
 exports.DEFAULT_MODIFIERS = [
     {
         name: 'preventOverflow',
-        options: { altAxis: true, tether: false, padding: 8 },
+        options: { altAxis: true, tether: false, padding: exports.VIEWPORT_MIN_PADDING },
     },
 ];

package/node/components/NewPopover/styles.js

@@ -11,6 +11,7 @@ exports.StyledMuiPopper = (0, styled_1.styled)(Popper_1.default) `
   &.${constants_1.popoverClassnames.root} {
     --arrow-base: ${constants_1.ARROW_BASE}px;
     --arrow-height: ${constants_1.ARROW_HEIGHT}px;
+    --popover-viewport-padding: ${constants_1.VIEWPORT_MIN_PADDING}px;
 
     z-index: ${({ theme }) => theme.zIndex.modal};
   }

package/node/components/NewPopover/types.d.ts

@@ -23,7 +23,7 @@ export type NewPopoverProps = {
      */
     isOpen?: boolean;
     /**
-     * Позиция относительно anchor
+     * Позиция относительно anchor.
      * @default 'bottom'
      */
     placement?: NewPopoverPlacement;

package/node/components/NewPopover/useLogic/useLogic.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { type NewPopoverModifier, type NewPopoverProps } from '../types';
-type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'>;
-export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }: UseLogicParams) => {
+type UseLogicParams = Pick<NewPopoverProps, 'isOpen' | 'anchorEl' | 'onClose' | 'disableAutoFocus' | 'hasArrow' | 'disableMobileDrawer'> & Required<Pick<NewPopoverProps, 'placement'>>;
+export declare const useLogic: ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }: UseLogicParams) => {
     shouldRenderDrawer: boolean;
     isOpened: boolean;
     shouldRender: boolean;

package/node/components/NewPopover/useLogic/useLogic.js

@@ -8,10 +8,8 @@ const useFocusTrapEffect_1 = require("../../useFocusTrapEffect");
 const usePopoverAnimation_1 = require("../../usePopoverAnimation");
 const useViewportType_1 = require("../../useViewportType");
 const constants_1 = require("../constants");
-const getArrowPadding_1 = require("./utils/getArrowPadding");
-const getPopoverCssVars_1 = require("./utils/getPopoverCssVars");
-const resolveAnchorNode_1 = require("./utils/resolveAnchorNode");
-const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, }) => {
+const utils_1 = require("./utils");
+const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disableMobileDrawer, placement, }) => {
     const containerRef = (0, react_1.useRef)(null);
     const [isContainerMounted, setIsContainerMounted] = (0, react_1.useState)(false);
     const [arrowElement, setArrowElement] = (0, react_1.useState)(null);
@@ -23,10 +21,10 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disab
     const isControlled = isOpen !== undefined;
     const { isMobile } = (0, useViewportType_1.useViewportType)();
     const { shouldRender, handleAnimationEnd } = (0, usePopoverAnimation_1.usePopoverAnimation)(isOpened);
-    const animatedWrapperStyle = (0, getPopoverCssVars_1.getPopoverCssVars)();
+    const animatedWrapperStyle = (0, utils_1.getPopoverCssVars)();
     const shouldRenderDrawer = isMobile && !disableMobileDrawer;
     const isPopoverActive = !shouldRenderDrawer && isOpened && isContainerMounted;
-    const anchorNode = (0, react_1.useMemo)(() => (0, resolveAnchorNode_1.resolveAnchorNode)(anchorEl), [anchorEl]);
+    const anchorNode = (0, react_1.useMemo)(() => (0, utils_1.resolveAnchorNode)(anchorEl), [anchorEl]);
     const excludeNodes = (0, react_1.useMemo)(() => [anchorNode], [anchorNode]);
     const handleClose = (event) => {
         onClose?.(event);
@@ -53,18 +51,20 @@ const useLogic = ({ isOpen, anchorEl, onClose, disableAutoFocus, hasArrow, disab
         fallbackFocus: () => containerRef.current || document.body,
     });
     const mergedModifiers = (0, react_1.useMemo)(() => {
-        if (!hasArrow) {
-            return constants_1.DEFAULT_MODIFIERS;
+        const modifiers = [...constants_1.DEFAULT_MODIFIERS];
+        const fallbackPlacements = (0, utils_1.getFallbackPlacements)(placement);
+        if (fallbackPlacements) {
+            modifiers.push({ name: 'flip', options: { fallbackPlacements } });
         }
-        return [
-            ...constants_1.DEFAULT_MODIFIERS,
-            {
+        if (hasArrow) {
+            modifiers.push({
                 name: 'arrow',
                 enabled: true,
-                options: { element: arrowElement, padding: getArrowPadding_1.getArrowPadding },
-            },
-        ];
-    }, [hasArrow, arrowElement]);
+                options: { element: arrowElement, padding: utils_1.getArrowPadding },
+            });
+        }
+        return modifiers;
+    }, [hasArrow, arrowElement, placement]);
     return {
         shouldRenderDrawer,
         isOpened,

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/getFallbackPlacements.d.ts

@@ -0,0 +1,7 @@
+import { type NewPopoverPlacement } from '../../../types';
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+export declare const getFallbackPlacements: (placement: NewPopoverPlacement) => NewPopoverPlacement[] | undefined;

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/getFallbackPlacements.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getFallbackPlacements = void 0;
+const OPPOSITE_SIDE = {
+    left: 'right',
+    right: 'left',
+};
+const VERTICAL_SIDES = ['bottom', 'top'];
+const checkIsSidePlacement = (side) => side in OPPOSITE_SIDE;
+/**
+ * Значение fallbackPlacements для модификатора flip: заданная сторона не подошла —
+ * берётся следующая по списку. Для вертикальной стороны и `auto` список не задаётся,
+ * flip справляется сам.
+ */
+const getFallbackPlacements = (placement) => {
+    const [side, alignment] = placement.split('-');
+    if (!checkIsSidePlacement(side)) {
+        return undefined;
+    }
+    const suffix = alignment ? `-${alignment}` : '';
+    return [OPPOSITE_SIDE[side], ...VERTICAL_SIDES].map((fallbackSide) => `${fallbackSide}${suffix}`);
+};
+exports.getFallbackPlacements = getFallbackPlacements;

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/index.d.ts

@@ -0,0 +1 @@
+export * from './getFallbackPlacements';

package/node/components/NewPopover/useLogic/utils/getFallbackPlacements/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getFallbackPlacements"), exports);

package/node/components/NewPopover/useLogic/utils/index.d.ts

@@ -0,0 +1,4 @@
+export * from './getArrowPadding';
+export * from './getFallbackPlacements';
+export * from './getPopoverCssVars';
+export * from './resolveAnchorNode';

package/node/components/NewPopover/useLogic/utils/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./getArrowPadding"), exports);
+__exportStar(require("./getFallbackPlacements"), exports);
+__exportStar(require("./getPopoverCssVars"), exports);
+__exportStar(require("./resolveAnchorNode"), exports);