@cloud-ru/ds-uikit-product-header 2.0.3-preview-c6bef496.0 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "2.0.3-preview-c6bef496.0",
+  "version": "2.0.3",
   "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-breadcrumbs": "1.0.23-preview-c6bef496.0",
-    "@cloud-ru/ds-button": "1.0.4",
-    "@cloud-ru/ds-avatar": "1.0.8",
-    "@cloud-ru/ds-divider": "1.0.2",
-    "@cloud-ru/ds-card": "1.0.18-preview-c6bef496.0",
-    "@cloud-ru/ds-drag-and-drop": "1.1.3",
-    "@cloud-ru/ds-drawer": "1.2.6-preview-c6bef496.0",
-    "@cloud-ru/ds-icons": "1.3.0",
-    "@cloud-ru/ds-info-block": "1.0.3",
-    "@cloud-ru/ds-adaptive": "1.0.2",
-    "@cloud-ru/ds-list": "2.2.6-preview-c6bef496.0",
-    "@cloud-ru/ds-locale": "1.0.0",
-    "@cloud-ru/ds-modal": "1.1.7-preview-c6bef496.0",
-    "@cloud-ru/ds-portal-context": "1.0.2",
-    "@cloud-ru/ds-promo-tag": "1.0.3",
-    "@cloud-ru/ds-segment-control": "1.0.10",
-    "@cloud-ru/ds-scroll": "1.0.5",
-    "@cloud-ru/ds-search": "1.0.11",
-    "@cloud-ru/ds-skeleton": "1.0.2",
-    "@cloud-ru/ds-tooltip": "1.0.8",
-    "@cloud-ru/ds-typography": "1.0.0",
-    "@cloud-ru/ds-uikit-product-card-predefined": "4.0.3-preview-c6bef496.0",
-    "@cloud-ru/ds-uikit-product-switch-row": "1.0.11",
-    "@cloud-ru/ds-theme": "2.0.0",
-    "@cloud-ru/ds-utils": "1.2.0",
-    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.13"
+    "@cloud-ru/ds-accordion": "^1.1.4",
+    "@cloud-ru/ds-adaptive": "^1.0.2",
+    "@cloud-ru/ds-breadcrumbs": "^1.0.23",
+    "@cloud-ru/ds-avatar": "^1.0.9",
+    "@cloud-ru/ds-button": "^1.0.4",
+    "@cloud-ru/ds-card": "^1.0.18",
+    "@cloud-ru/ds-divider": "^1.0.2",
+    "@cloud-ru/ds-drawer": "^1.2.6",
+    "@cloud-ru/ds-icons": "^1.4.0",
+    "@cloud-ru/ds-drag-and-drop": "^1.1.3",
+    "@cloud-ru/ds-info-block": "^1.0.3",
+    "@cloud-ru/ds-locale": "^1.0.0",
+    "@cloud-ru/ds-list": "^2.2.6",
+    "@cloud-ru/ds-modal": "^1.1.7",
+    "@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.12",
+    "@cloud-ru/ds-segment-control": "^1.0.11",
+    "@cloud-ru/ds-skeleton": "^1.0.2",
+    "@cloud-ru/ds-tooltip": "^1.0.9",
+    "@cloud-ru/ds-uikit-product-card-predefined": "^4.0.3",
+    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.12",
+    "@cloud-ru/ds-theme": "^2.0.0",
+    "@cloud-ru/ds-typography": "^1.0.1",
+    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.14",
+    "@cloud-ru/ds-utils": "^1.2.0"
   },
   "publishConfig": {
     "access": "public"

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

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

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

@@ -7,11 +7,6 @@ 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);
@@ -28,14 +23,6 @@ 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;
 
@@ -46,19 +33,21 @@ 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={setPanelRef} style={{ top: positions.panelTopShift }}>
+      <div
+        className={styles.panel}
+        ref={element => {
+          if (element) {
+            setPanelHeight(element.offsetHeight);
+            panelRef.current = element;
+          }
+        }}
+        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, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
+import { BaseItemProps, Droplist, DroplistProps } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { useCallback, useMemo } from 'react';
+import { useMemo } from 'react';
 
-import { TEST_IDS } from '../../constants';
+import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../constants';
 import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName';
 import { useMobileLayout } from '../../hooks/useMobileLayout';
 import { headerLocale } from '../../locale';
@@ -77,10 +77,6 @@ export function UserMenu({
 
   const { fullName = '', inviteCount } = profile;
 
-  const handleClose = useCallback(() => {
-    setOpen(false);
-  }, [setOpen]);
-
   const {
     pinTop,
     items: menuItems,
@@ -93,7 +89,9 @@ export function UserMenu({
     organizationItems,
     bottomItems,
     settingItems,
-    onClose: handleClose,
+    onClose: () => {
+      setOpen(false);
+    },
     onLogout,
   });
 
@@ -138,9 +136,7 @@ export function UserMenu({
       closeOnPopstate
       data-test-id={TEST_IDS.userMenu.root}
       label={t('user')}
-      snapPoints={SNAP_POINTS_PRESET.full}
-      withDividers={false}
-      triggerClassName={styles.userMenuDroplistTrigger}
+      snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
     >
       {trigger}
     </Droplist>

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

@@ -1,23 +1,23 @@
 import { ExitSVG } from '@cloud-ru/ds-icons/interface/product';
-import { BaseItem } from '@cloud-ru/ds-list';
+import { ListProps } 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 }): BaseItem {
+export function useLogoutItem({ onLogout }: { onLogout?(): void }): ListProps['items'] {
   const { t } = headerLocale.useTranslations();
 
-  return useMemo<BaseItem>(
-    () => ({
-      beforeContent: <ExitSVG />,
-      content: {
-        label: t('logout'),
+  return useMemo<ListProps['items']>(
+    () => [
+      {
+        beforeContent: <ExitSVG />,
+        content: {
+          label: t('logout'),
+        },
+        onClick: onLogout,
+        'data-test-id': 'header__user-menu__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,9 +1,5 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 
-.userMenuDroplistTrigger {
-  display: inline-flex;
-}
-
 .userMenuDroplist {
   width: 256px; // нет токена ширины дропдауна
 }
@@ -12,10 +8,3 @@
 .profileSettingsIcon {
   color: base.$sn-theme-color-neutral-text;
 }
-
-.logoutItem {
-  span,
-  svg {
-    color: base.$sn-theme-color-red-text;
-  }
-}

package/src/constants.ts

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