@cloud-ru/ds-uikit-product-header 1.5.0 → 1.5.1-preview-a2208aeb.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "1.5.0",
+  "version": "1.5.1-preview-a2208aeb.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-adaptive": "^1.0.1",
-    "@cloud-ru/ds-accordion": "^1.0.7",
-    "@cloud-ru/ds-avatar": "^1.0.4",
-    "@cloud-ru/ds-breadcrumbs": "^1.0.17",
-    "@cloud-ru/ds-button": "^1.0.2",
-    "@cloud-ru/ds-card": "^1.0.13",
-    "@cloud-ru/ds-drawer": "^1.2.1",
-    "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
-    "@cloud-ru/ds-icons": "^1.2.0",
-    "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-list": "^2.2.0",
-    "@cloud-ru/ds-modal": "^1.1.2",
-    "@cloud-ru/ds-portal-context": "^1.0.1",
-    "@cloud-ru/ds-promo-tag": "^1.0.1",
-    "@cloud-ru/ds-locale": "^1.0.0",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-search": "^1.0.8",
-    "@cloud-ru/ds-segment-control": "^1.0.6",
-    "@cloud-ru/ds-skeleton": "^1.0.1",
-    "@cloud-ru/ds-tooltip": "^1.0.5",
-    "@cloud-ru/ds-theme": "^1.1.0",
-    "@cloud-ru/ds-typography": "^1.0.0",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.7",
-    "@cloud-ru/ds-uikit-product-card-predefined": "^3.1.3",
-    "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.9",
-    "@cloud-ru/ds-utils": "^1.1.0"
+    "@cloud-ru/ds-accordion": "1.0.8-preview-a2208aeb.0",
+    "@cloud-ru/ds-button": "1.0.3-preview-a2208aeb.0",
+    "@cloud-ru/ds-avatar": "1.0.5-preview-a2208aeb.0",
+    "@cloud-ru/ds-breadcrumbs": "1.0.18-preview-a2208aeb.0",
+    "@cloud-ru/ds-card": "1.0.14-preview-a2208aeb.0",
+    "@cloud-ru/ds-adaptive": "1.0.1",
+    "@cloud-ru/ds-divider": "1.0.1",
+    "@cloud-ru/ds-drag-and-drop": "1.1.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-drawer": "1.2.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-icons": "1.2.1-preview-a2208aeb.0",
+    "@cloud-ru/ds-list": "2.2.1-preview-a2208aeb.0",
+    "@cloud-ru/ds-locale": "1.0.0",
+    "@cloud-ru/ds-info-block": "1.0.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-modal": "1.1.3-preview-a2208aeb.0",
+    "@cloud-ru/ds-promo-tag": "1.0.2-preview-a2208aeb.0",
+    "@cloud-ru/ds-portal-context": "1.0.1",
+    "@cloud-ru/ds-scroll": "1.0.3-preview-a2208aeb.0",
+    "@cloud-ru/ds-search": "1.0.9-preview-a2208aeb.0",
+    "@cloud-ru/ds-segment-control": "1.0.7-preview-a2208aeb.0",
+    "@cloud-ru/ds-skeleton": "1.0.1",
+    "@cloud-ru/ds-theme": "1.1.1-preview-a2208aeb.0",
+    "@cloud-ru/ds-tooltip": "1.0.6-preview-a2208aeb.0",
+    "@cloud-ru/ds-typography": "1.0.0",
+    "@cloud-ru/ds-uikit-product-card-predefined": "3.1.4-preview-a2208aeb.0",
+    "@cloud-ru/ds-uikit-product-switch-row": "1.0.8-preview-a2208aeb.0",
+    "@cloud-ru/ds-uikit-product-title-clickable": "1.0.10-preview-a2208aeb.0",
+    "@cloud-ru/ds-utils": "1.1.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/HeaderLayout/HeaderLayout.tsx

@@ -1,7 +1,8 @@
 import { Divider } from '@cloud-ru/ds-divider';
+import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
-import { ReactNode } from 'react';
+import { ReactNode, useRef } from 'react';
 
 import { TEST_IDS } from '../../constants';
 import { useMobileLayout } from '../../hooks/useMobileLayout';
@@ -18,9 +19,11 @@ export type HeaderLayoutProps = WithSupportProps<{
 
 export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, className, ...rest }: HeaderLayoutProps) {
   const isMobile = useMobileLayout();
+  const headerRef = useRef<HTMLElement>(null);
 
-  return (
+  const header = (
     <header
+      ref={headerRef}
       className={cn(styles.header, className)}
       {...extractSupportProps({ 'data-test-id': TEST_IDS.headerLayout.root, ...rest })}
     >
@@ -57,4 +60,18 @@ export function HeaderLayout({ menu, logo, select, breadcrumbs, toolbar, classNa
       {isMobile && Boolean(breadcrumbs) && <div className={styles.bottom}>{breadcrumbs}</div>}
     </header>
   );
+
+  // Временная фиксация: на mobile прикладная тема переключилась на compact, а шапка сверстана
+  // под comfort и на compact ещё не переехала. Провайдер (а не класс на `<header>`) нужен потому,
+  // что поверхности шапки — порталы: они переэмитят набор `sn-*` из контекста на своём корне,
+  // и класс, поставленный поверх, проиграл бы их собственному.
+  if (isMobile) {
+    return (
+      <ChildThemeProvider value={{ density: DENSITY.Comfort }} rootRef={headerRef}>
+        {header}
+      </ChildThemeProvider>
+    );
+  }
+
+  return header;
 }

package/src/components/Logo/Logo.tsx

@@ -23,7 +23,7 @@ export type LogoProps = WithSupportProps<{
 
 export function Logo({ path, loading, mode, href, onClick, className, tooltip, ...rest }: LogoProps) {
   const [error, setError] = useState<boolean>(false);
-  const brandCThemeClassName = useThemeClassnames({ brand: 'brandC' });
+  const logoThemeClassName = useThemeClassnames({ brand: 'hrGreen' });
 
   useEffect(() => {
     setError(false);
@@ -49,8 +49,8 @@ export function Logo({ path, loading, mode, href, onClick, className, tooltip, .
     return (
       <span className={styles.logoWrap}>
         <span className={styles.iconStack}>
-          <CloudLogo size={24} className={cn(styles.icon, brandCThemeClassName, styles.iconDefault)} />
-          <HomeFilledSVG size={24} className={cn(styles.icon, brandCThemeClassName, styles.iconHover)} />
+          <CloudLogo size={24} className={cn(styles.icon, logoThemeClassName, styles.iconDefault)} />
+          <HomeFilledSVG size={24} className={cn(styles.icon, logoThemeClassName, styles.iconHover)} />
         </span>
 
         {mode && mode !== HEADER_LOGO_MODE.Prod && (
@@ -58,7 +58,7 @@ export function Logo({ path, loading, mode, href, onClick, className, tooltip, .
         )}
       </span>
     );
-  }, [error, mode, path, brandCThemeClassName]);
+  }, [error, mode, path, logoThemeClassName]);
 
   return (
     <HeaderButton

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

@@ -1,4 +1,5 @@
 import { Divider } from '@cloud-ru/ds-divider';
+import { ChildThemeProvider, DENSITY } from '@cloud-ru/ds-theme';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { useCallback, useMemo } from 'react';
 
@@ -61,54 +62,59 @@ export function MenuMobile({
   }, [setOpen]);
 
   return (
-    <MobileDrawerCustom
-      open={open}
-      onClose={handleClose}
-      position='bottom'
-      className={styles.drawerMobile}
-      swipeEnabled={false}
-      data-test-id={TEST_IDS.mainMenu.drawerMobile}
-      closeOnPopstate
-      snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
-      disableMotions={true}
-    >
-      <ScrollWithAnimatedStickyPanel
-        panel={
-          <>
-            <MenuHeaderBrand logo={logo} onClose={handleClose} className={styles.menuHeader} />
-            <Divider orientation='horizontal' />
-          </>
-        }
+    // Временная фиксация comfort (см. `HeaderLayout`): `MainMenu` используется и отдельно от
+    // `HeaderLayout`, поэтому объявляем плотность здесь же. Обёртка провайдера layout-прозрачная
+    // (`display: contents`) — меню рендерится порталом, лишний бокс в строке шапки не нужен.
+    <ChildThemeProvider value={{ density: DENSITY.Comfort }} className={styles.densityScope}>
+      <MobileDrawerCustom
+        open={open}
+        onClose={handleClose}
+        position='bottom'
+        className={styles.drawerMobile}
+        swipeEnabled={false}
+        data-test-id={TEST_IDS.mainMenu.drawerMobile}
+        closeOnPopstate
+        snapPoints={BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS}
+        disableMotions={true}
       >
-        <MountAnimation className={styles.scrollMobile} type='fade-slide-up'>
-          {leftTop && <div className={styles.rightContent}>{leftTop}</div>}
-          {search && <Search {...search} ref={searchRef} isMobile />}
-          {!isSearching && favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} isMobile />}
+        <ScrollWithAnimatedStickyPanel
+          panel={
+            <>
+              <MenuHeaderBrand logo={logo} onClose={handleClose} className={styles.menuHeader} />
+              <Divider orientation='horizontal' />
+            </>
+          }
+        >
+          <MountAnimation className={styles.scrollMobile} type='fade-slide-up'>
+            {leftTop && <div className={styles.rightContent}>{leftTop}</div>}
+            {search && <Search {...search} ref={searchRef} isMobile />}
+            {!isSearching && favorite && <Favorites favorite={favorite} allServiceGroups={allServiceGroups} isMobile />}
 
-          {hasSegments && (
-            <MainMenuDndContext>
-              <Content
-                isMobile
-                className={styles.rightContent}
-                searchValue={search && search.value}
-                rightTop={rightTop}
-                favorite={favorite}
-                segments={segments}
-                searchGroups={resultItems}
-                segmentPrefs={segmentPrefs}
-                activeSegmentId={activeSegmentId}
-                onActiveSegmentChange={onActiveSegmentChange}
-                onSegmentOrderChange={onSegmentOrderChange}
-                onSegmentExpandedChange={onSegmentExpandedChange}
-                onSegmentServiceClick={onSegmentServiceClick}
-                loading={loading}
-              />
-            </MainMenuDndContext>
-          )}
+            {hasSegments && (
+              <MainMenuDndContext>
+                <Content
+                  isMobile
+                  className={styles.rightContent}
+                  searchValue={search && search.value}
+                  rightTop={rightTop}
+                  favorite={favorite}
+                  segments={segments}
+                  searchGroups={resultItems}
+                  segmentPrefs={segmentPrefs}
+                  activeSegmentId={activeSegmentId}
+                  onActiveSegmentChange={onActiveSegmentChange}
+                  onSegmentOrderChange={onSegmentOrderChange}
+                  onSegmentExpandedChange={onSegmentExpandedChange}
+                  onSegmentServiceClick={onSegmentServiceClick}
+                  loading={loading}
+                />
+              </MainMenuDndContext>
+            )}
 
-          {!isSearching && hasBottomItems && <MenuBottom settingItems={settingItems} leftBottom={leftBottom} />}
-        </MountAnimation>
-      </ScrollWithAnimatedStickyPanel>
-    </MobileDrawerCustom>
+            {!isSearching && hasBottomItems && <MenuBottom settingItems={settingItems} leftBottom={leftBottom} />}
+          </MountAnimation>
+        </ScrollWithAnimatedStickyPanel>
+      </MobileDrawerCustom>
+    </ChildThemeProvider>
   );
 }

package/src/components/MainMenu/helperComponents/MenuMobile/styles.module.scss

@@ -4,6 +4,12 @@
 $menuHeaderHeight: base.$sn-primitive-dimension-40;
 $menuHeaderHeightWithDivider: calc(#{$menuHeaderHeight} + #{divider.$sn-divider-anatomy-container-height});
 
+// Обёртка провайдера плотности вокруг портала меню: собственного бокса у неё быть не должно,
+// иначе в строке шапки появляется лишний flex-элемент и лишний gap.
+.densityScope {
+  display: contents;
+}
+
 .menuHeader {
   height: $menuHeaderHeight;
   padding: 0 base.$sn-primitive-dimension-4;