@cloud-ru/ds-uikit-product-header 2.0.2 → 2.0.3-preview-1207a902.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "2.0.2",
+  "version": "2.0.3-preview-1207a902.0",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -45,33 +45,33 @@
     "@dnd-kit/utilities": "^3.2.2",
     "classnames": "^2.5.1",
     "fuse.js": "^7.1.0",
-    "@cloud-ru/ds-accordion": "^1.1.3",
-    "@cloud-ru/ds-adaptive": "^1.0.2",
-    "@cloud-ru/ds-avatar": "^1.0.8",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.22",
-    "@cloud-ru/ds-button": "^1.0.4",
-    "@cloud-ru/ds-divider": "^1.0.2",
-    "@cloud-ru/ds-card": "^1.0.17",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.3",
-    "@cloud-ru/ds-drawer": "^1.2.5",
-    "@cloud-ru/ds-info-block": "^1.0.3",
-    "@cloud-ru/ds-icons": "^1.3.0",
-    "@cloud-ru/ds-list": "^2.2.5",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-modal": "^1.1.6",
-    "@cloud-ru/ds-portal-context": "^1.0.2",
-    "@cloud-ru/ds-promo-tag": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.5",
-    "@cloud-ru/ds-search": "^1.0.11",
-    "@cloud-ru/ds-theme": "^2.0.0",
-    "@cloud-ru/ds-segment-control": "^1.0.10",
-    "@cloud-ru/ds-tooltip": "^1.0.8",
-    "@cloud-ru/ds-skeleton": "^1.0.2",
-    "@cloud-ru/ds-typography": "^1.0.0",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.11",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^4.0.2",
-    "@cloud-ru/ds-utils": "^1.2.0",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.13"
+    "@cloud-ru/ds-adaptive": "1.0.2",
+    "@cloud-ru/ds-accordion": "1.1.3",
+    "@cloud-ru/ds-avatar": "1.0.8",
+    "@cloud-ru/ds-breadcrumbs": "1.0.23-preview-1207a902.0",
+    "@cloud-ru/ds-button": "1.0.4",
+    "@cloud-ru/ds-card": "1.0.18-preview-1207a902.0",
+    "@cloud-ru/ds-drag-and-drop": "1.1.3",
+    "@cloud-ru/ds-divider": "1.0.2",
+    "@cloud-ru/ds-icons": "1.3.0",
+    "@cloud-ru/ds-info-block": "1.0.3",
+    "@cloud-ru/ds-list": "2.2.6-preview-1207a902.0",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-modal": "1.1.7-preview-1207a902.0",
+    "@cloud-ru/ds-portal-context": "1.0.2",
+    "@cloud-ru/ds-promo-tag": "1.0.3",
+    "@cloud-ru/ds-search": "1.0.11",
+    "@cloud-ru/ds-scroll": "1.0.5",
+    "@cloud-ru/ds-segment-control": "1.0.10",
+    "@cloud-ru/ds-drawer": "1.2.6-preview-1207a902.0",
+    "@cloud-ru/ds-skeleton": "1.0.2",
+    "@cloud-ru/ds-theme": "2.0.0",
+    "@cloud-ru/ds-tooltip": "1.0.8",
+    "@cloud-ru/ds-typography": "1.0.0",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.11",
+    "@cloud-ru/ds-utils": "1.2.0",
+    "@cloud-ru/ds-uikit-product-card-predefined": "4.0.3-preview-1207a902.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.13"
   },
   "publishConfig": {
     "access": "public"

package/src/components/MainMenu/helperComponents/MenuBottom/MenuBottom.tsx

@@ -1,5 +1,5 @@
 import { Divider } from '@cloud-ru/ds-divider';
-import { CardServiceLight } from '@cloud-ru/ds-uikit-product-card-predefined';
+import { CardNavigation } from '@cloud-ru/ds-uikit-product-card-predefined';
 import { Fragment, ReactNode } from 'react';
 
 import { TEST_IDS } from '../../../../constants';
@@ -23,7 +23,7 @@ export function MenuBottom({ settingItems, leftBottom }: MenuBottomProps) {
             <Fragment key={item.id}>
               {item.divider === 'before' && <Divider orientation='horizontal' className={styles.bottomDivider} />}
 
-              <CardServiceLight
+              <CardNavigation
                 {...(item.href ? { href: item.href, as: 'a' } : { as: 'button', type: 'button' })}
                 title={item.label}
                 icon={getLinkEmblem(item)}

package/src/components/MainMenu/helperComponents/MenuMobile/MenuMobile.tsx

@@ -1,7 +1,8 @@
 import { Divider } from '@cloud-ru/ds-divider';
+import { SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useCallback, useMemo } from 'react';
 
-import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../../../constants';
+import { TEST_IDS } from '../../../../constants';
 import { MobileDrawerCustom } from '../../../../mobileOverlays';
 import { MainMenuDndContext } from '../../hooks/useMainMenuDnd';
 import { useMenuItems } from '../../hooks/useMenuItems';
@@ -67,7 +68,7 @@ export function MenuMobile({
       swipeEnabled={false}
       data-test-id={TEST_IDS.mainMenu.drawerMobile}
       closeOnPopstate
-      snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
+      snapPoints={SNAP_POINTS_PRESET.full}
       disableMotions={true}
     >
       <ScrollWithAnimatedStickyPanel

package/src/components/MainMenu/helperComponents/ScrollWithAnimatedStickyPanel/ScrollWithAnimatedStickyPanel.tsx

@@ -7,6 +7,11 @@ type ScrollWithAnimatedStickyPanelProps = PropsWithChildren<{
   panel: ReactNode;
 }>;
 
+// Упругая прокрутка у верхней границы (touch-скролл на мобильных не "упирается" жёстко в 0 —
+// контент можно немного "оттянуть" дальше) даёт scrollTop, не совпадающий с реальным положением
+// контента в этот момент. Диапазон запаса — единицы пикселей; двух хватает с большим запасом.
+const TOP_OVERSCROLL_EPSILON_PX = 2;
+
 export function ScrollWithAnimatedStickyPanel({ panel, children }: ScrollWithAnimatedStickyPanelProps) {
   const [positions, setPositions] = useState({ panelTopShift: 0, containerScroll: 0 });
   const [panelHeight, setPanelHeight] = useState(0);
@@ -23,6 +28,14 @@ export function ScrollWithAnimatedStickyPanel({ panel, children }: ScrollWithAni
 
     setPanelHeight(panelHeight);
 
+    // У верхней границы панель всегда полностью видна — не доверяем накопленному diff. Иначе
+    // "лишний" ход упругой прокрутки у самого верха читается как скролл вниз и на возврате к
+    // началу списка панель может остаться скрытой, хотя пользователь как раз скроллит наверх.
+    if (target.scrollTop <= TOP_OVERSCROLL_EPSILON_PX) {
+      setPositions({ panelTopShift: 0, containerScroll: target.scrollTop });
+      return;
+    }
+
     setPositions(prev => {
       const diff = prev.containerScroll - target.scrollTop;
 
@@ -33,21 +46,19 @@ export function ScrollWithAnimatedStickyPanel({ panel, children }: ScrollWithAni
     });
   }, []);
 
+  const setPanelRef = useCallback((element: HTMLDivElement | null) => {
+    if (element) {
+      setPanelHeight(element.offsetHeight);
+      panelRef.current = element;
+    }
+  }, []);
+
   return (
     <div className={styles.container} style={{ '--snack-autohide-panel-height': `${panelHeight}px` }}>
       <Scroll barHideStrategy='never' overflow={{ x: 'hidden' }} onScroll={handleScroll}>
         {children}
       </Scroll>
-      <div
-        className={styles.panel}
-        ref={element => {
-          if (element) {
-            setPanelHeight(element.offsetHeight);
-            panelRef.current = element;
-          }
-        }}
-        style={{ top: positions.panelTopShift }}
-      >
+      <div className={styles.panel} ref={setPanelRef} style={{ top: positions.panelTopShift }}>
         {panel}
       </div>
     </div>

package/src/components/UserMenu/UserMenu.tsx

@@ -1,10 +1,10 @@
 import { Avatar } from '@cloud-ru/ds-avatar';
-import { BaseItemProps, Droplist, DroplistProps } from '@cloud-ru/ds-list';
+import { BaseItemProps, Droplist, DroplistProps, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useMemo } from 'react';
+import { useCallback, useMemo } from 'react';
 
-import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../constants';
+import { TEST_IDS } from '../../constants';
 import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName';
 import { useMobileLayout } from '../../hooks/useMobileLayout';
 import { headerLocale } from '../../locale';
@@ -77,6 +77,10 @@ export function UserMenu({
 
   const { fullName = '', inviteCount } = profile;
 
+  const handleClose = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+
   const {
     pinTop,
     items: menuItems,
@@ -89,9 +93,7 @@ export function UserMenu({
     organizationItems,
     bottomItems,
     settingItems,
-    onClose: () => {
-      setOpen(false);
-    },
+    onClose: handleClose,
     onLogout,
   });
 
@@ -136,7 +138,10 @@ export function UserMenu({
       closeOnPopstate
       data-test-id={TEST_IDS.userMenu.root}
       label={t('user')}
-      snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
+      snapPoints={SNAP_POINTS_PRESET.full}
+      safeArea
+      withDividers={false}
+      triggerClassName={styles.userMenuDroplistTrigger}
     >
       {trigger}
     </Droplist>

package/src/components/UserMenu/hooks/useLogoutItem.tsx

@@ -1,23 +1,23 @@
 import { ExitSVG } from '@cloud-ru/ds-icons/interface/product';
-import { ListProps } from '@cloud-ru/ds-list';
+import { BaseItem } from '@cloud-ru/ds-list';
 import { useMemo } from 'react';
 
 import { headerLocale } from '../../../locale';
+import styles from '../styles.module.scss';
 
-export function useLogoutItem({ onLogout }: { onLogout?(): void }): ListProps['items'] {
+export function useLogoutItem({ onLogout }: { onLogout?(): void }): BaseItem {
   const { t } = headerLocale.useTranslations();
 
-  return useMemo<ListProps['items']>(
-    () => [
-      {
-        beforeContent: <ExitSVG />,
-        content: {
-          label: t('logout'),
-        },
-        onClick: onLogout,
-        'data-test-id': 'header__user-menu__logout',
+  return useMemo<BaseItem>(
+    () => ({
+      beforeContent: <ExitSVG />,
+      content: {
+        label: t('logout'),
       },
-    ],
+      className: styles.logoutItem,
+      onClick: onLogout,
+      'data-test-id': 'header__user-menu__logout',
+    }),
     [onLogout, t],
   );
 }

package/src/components/UserMenu/hooks/useUserMenuItems.ts

@@ -79,12 +79,12 @@ export function useUserMenuItems({
 
     let pinBottom = bottomItems.concat(logoutItem);
 
-    if (isMobile && Boolean(settingItems?.length)) {
-      pinBottom = pinBottom.concat([DIVIDER_ITEM, ...settingItems]);
-    }
-
     // В шторке прокручивается всё меню, закреплять части незачем; разделитель над организациями добавляем сами
     if (isMobile) {
+      if (settingItems?.length) {
+        pinBottom = [...bottomItems, ...settingItems, DIVIDER_ITEM, logoutItem];
+      }
+
       return {
         pinTop: [],
         items: withClose([...pinTop, DIVIDER_ITEM, ...organizationItems, ...pinBottom]),

package/src/components/UserMenu/styles.module.scss

@@ -1,5 +1,9 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 
+.userMenuDroplistTrigger {
+  display: inline-flex;
+}
+
 .userMenuDroplist {
   width: 256px; // нет токена ширины дропдауна
 }
@@ -8,3 +12,10 @@
 .profileSettingsIcon {
   color: base.$sn-theme-color-neutral-text;
 }
+
+.logoutItem {
+  span,
+  svg {
+    color: base.$sn-theme-color-red-text;
+  }
+}

package/src/constants.ts

@@ -26,6 +26,3 @@ export const TEST_IDS = {
     root: 'header__breadcrumbs',
   },
 } as const;
-
-// Только mobile: в мастере bottomSheet панель открывается на всю высоту экрана.
-export const BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS = [1];