@cloud-ru/ds-uikit-product-header 1.5.1 → 1.5.2-preview-0406cbd2.0

package/dist/esm/components/MainMenu/helperComponents/MountAnimation/styles.module.css

@@ -5,17 +5,17 @@
   animation-fill-mode:forwards;
 }
 .wrapper[data-animation-type=fade-slide-up-right]{
-  transform:translate(-12px, 4px);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up-right;
 }
 .wrapper[data-animation-type=fade-slide-up]{
-  transform:translate(0, 4px);
+  transform:translate(0, var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up;
 }
 .wrapper[data-animation-type=slide-right]{
-  transform:translate(-12px, 0);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   animation-name:slide-right;
 }
 .wrapper[data-animation-type=fade-in]{
@@ -32,7 +32,7 @@
 }
 @keyframes fade-slide-up{
   0%{
-    transform:translate(0, 4px);
+    transform:translate(0, var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -42,7 +42,7 @@
 }
 @keyframes fade-slide-up-right{
   0%{
-    transform:translate(-12px, 4px);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -52,7 +52,7 @@
 }
 @keyframes slide-right{
   0%{
-    transform:translate(-12px, 0);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   }
   100%{
     transform:translate(0, 0);

package/dist/esm/components/MainMenu/helperComponents/Search/styles.module.css

@@ -1,6 +1,8 @@
 .searchWrap:not([data-mobile]){
   flex:1 1 auto;
-  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+  box-sizing:border-box;
+  margin:0 var(--sn-primitive-dimension-4, 4px);
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
 }
 
 .search{

package/dist/esm/components/PathBreadcrumbs/PathBreadcrumbs.d.ts

@@ -1,7 +1,6 @@
 import { BreadcrumbsProps } from '@cloud-ru/ds-breadcrumbs';
 type PathBreadcrumbsProps = {
     items: BreadcrumbsProps['items'];
-    isMobile?: boolean;
 };
-export declare function PathBreadcrumbs({ isMobile, items }: PathBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
+export declare function PathBreadcrumbs({ items }: PathBreadcrumbsProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/PathBreadcrumbs/PathBreadcrumbs.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Breadcrumbs } from '@cloud-ru/ds-breadcrumbs';
 import { TEST_IDS } from '../../constants.js';
 import styles from './styles.module.css';
-export function PathBreadcrumbs({ isMobile, items }) {
-    return (_jsx(Breadcrumbs, { items: items, className: styles.breadcrumbs, inactiveLastItem: items.length > 1, separator: '/', size: isMobile ? 'xs' : 's', "data-test-id": TEST_IDS.breadcrumbs.root }));
+export function PathBreadcrumbs({ items }) {
+    return (_jsx(Breadcrumbs, { items: items, className: styles.breadcrumbs, inactiveLastItem: items.length > 1, separator: '/', size: 'xs', "data-test-id": TEST_IDS.breadcrumbs.root }));
 }

package/dist/esm/components/PlatformLogo/styles.module.css

@@ -2,8 +2,10 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  box-sizing:border-box;
   width:var(--sn-primitive-dimension-24, 24px);
   height:var(--sn-primitive-dimension-24, 24px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }

package/dist/esm/components/UserMenu/UserMenu.js

@@ -2,8 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Avatar } from '@cloud-ru/ds-avatar';
 import { Droplist } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
 import { useMemo } from 'react';
 import { BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, TEST_IDS } from '../../constants.js';
+import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName.js';
 import { useMobileLayout } from '../../hooks/useMobileLayout.js';
 import { headerLocale } from '../../locale/index.js';
 import { HeaderButton } from '../HeaderButton/index.js';
@@ -17,6 +19,7 @@ const SELECTION_STUB = { mode: 'single', value: '__empty_stub__', onChange: () =
 export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, onLogout, items, settingItems, theme, onClick, triggerTooltip, }) {
     const { t } = headerLocale.useTranslations();
     const isMobile = useMobileLayout();
+    const comfortClassName = useDesktopComfortClassName();
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: setOpenProp });
     const { fullName = '', inviteCount } = profile;
     const userMenuItems = useUserMenuItems({
@@ -36,7 +39,8 @@ export function UserMenu({ profile = {}, open: openProp, setOpen: setOpenProp, o
         }, counter: Number(inviteCount)
             ? {
                 value: Number(inviteCount),
+                appearance: 'primary',
             }
             : undefined, "data-test-id": TEST_IDS.userMenu.button, icon: _jsx(Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }), "data-pressed": open })), [fullName, inviteCount, onClick, open, setOpen, isMobile, triggerTooltip]);
-    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, items: userMenuItems, trigger: 'click', placement: 'bottom-end', className: styles.userMenuDroplist, closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
+    return (_jsx(Droplist, { open: open, onOpenChange: setOpen, size: 'm', selection: SELECTION_STUB, items: userMenuItems, trigger: 'click', placement: 'bottom-end', className: cn(styles.userMenuDroplist, comfortClassName), closeOnPopstate: true, "data-test-id": TEST_IDS.userMenu.root, label: t('user'), snapPoints: BOTTOM_SHEET_FULLSCREEN_SNAP_POINTS, children: trigger }));
 }

package/dist/esm/components/UserMenu/styles.module.css

@@ -1,5 +1,5 @@
 .userMenuDroplist{
-  width:272px;
+  width:256px;
 }
 
 .userMenuTrigger{

package/dist/esm/hooks/useDesktopComfortClassName.d.ts

@@ -0,0 +1,2 @@
+/** Класс плотности comfort для выпадающих списков шапки на desktop; на mobile остаётся compact из темы. */
+export declare function useDesktopComfortClassName(): string | undefined;

package/dist/esm/hooks/useDesktopComfortClassName.js

@@ -0,0 +1,8 @@
+import { DENSITY, useThemeClassnames } from '@cloud-ru/ds-theme';
+import { useMobileLayout } from './useMobileLayout.js';
+/** Класс плотности comfort для выпадающих списков шапки на desktop; на mobile остаётся compact из темы. */
+export function useDesktopComfortClassName() {
+    const isMobile = useMobileLayout();
+    const comfortClassName = useThemeClassnames({ density: DENSITY.Comfort });
+    return isMobile ? undefined : comfortClassName;
+}

package/dist/esm/hooks/useMobileLayout.js

@@ -1,5 +1,6 @@
 import { LAYOUT_TYPE, useAdaptiveLayout } from '@cloud-ru/ds-adaptive';
 export function useMobileLayout() {
     const { layoutType } = useAdaptiveLayout();
+    // Осознанное исключение из isMobileLayout: desktop-шапка не помещается на tablet и desktopSmall
     return layoutType !== LAYOUT_TYPE.Desktop;
 }

package/dist/esm/locale/index.d.ts

@@ -3,11 +3,11 @@ declare const HEADER_MESSAGES: {
         readonly searchByServices: "Search by services and their sections";
         readonly services: "Services";
         readonly user: "User";
-        readonly logout: "Log out";
+        readonly logout: "Log out of account";
         readonly noData: "No data";
         readonly noDataFound: "Nothing found";
         readonly dragGroup: "Drag group";
-        readonly themeModeLabel: "Theme";
+        readonly themeModeLabel: "Interface theme";
         readonly themeModeLight: "Light";
         readonly themeModeDark: "Dark";
         readonly themeModeSystem: "System";
@@ -31,11 +31,11 @@ declare const HEADER_MESSAGES: {
         readonly searchByServices: "Поиск по сервисам и их разделам";
         readonly services: "Сервисы";
         readonly user: "Пользователь";
-        readonly logout: "Выйти";
+        readonly logout: "Выйти из аккаунта";
         readonly noData: "Нет данных";
         readonly noDataFound: "Ничего не найдено";
         readonly dragGroup: "Перетащить группу";
-        readonly themeModeLabel: "Тема";
+        readonly themeModeLabel: "Тема интерфейса";
         readonly themeModeLight: "Светлая";
         readonly themeModeDark: "Тёмная";
         readonly themeModeSystem: "Системная";
@@ -62,11 +62,11 @@ export declare const headerLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
         readonly searchByServices: "Search by services and their sections";
         readonly services: "Services";
         readonly user: "User";
-        readonly logout: "Log out";
+        readonly logout: "Log out of account";
         readonly noData: "No data";
         readonly noDataFound: "Nothing found";
         readonly dragGroup: "Drag group";
-        readonly themeModeLabel: "Theme";
+        readonly themeModeLabel: "Interface theme";
         readonly themeModeLight: "Light";
         readonly themeModeDark: "Dark";
         readonly themeModeSystem: "System";
@@ -90,11 +90,11 @@ export declare const headerLocale: import("@cloud-ru/ds-locale").DefinedLocale<{
         readonly searchByServices: "Поиск по сервисам и их разделам";
         readonly services: "Сервисы";
         readonly user: "Пользователь";
-        readonly logout: "Выйти";
+        readonly logout: "Выйти из аккаунта";
         readonly noData: "Нет данных";
         readonly noDataFound: "Ничего не найдено";
         readonly dragGroup: "Перетащить группу";
-        readonly themeModeLabel: "Тема";
+        readonly themeModeLabel: "Тема интерфейса";
         readonly themeModeLight: "Светлая";
         readonly themeModeDark: "Тёмная";
         readonly themeModeSystem: "Системная";

package/dist/esm/locale/index.js

@@ -4,11 +4,11 @@ const HEADER_MESSAGES = defineMessages({
         searchByServices: 'Search by services and their sections',
         services: 'Services',
         user: 'User',
-        logout: 'Log out',
+        logout: 'Log out of account',
         noData: 'No data',
         noDataFound: 'Nothing found',
         dragGroup: 'Drag group',
-        themeModeLabel: 'Theme',
+        themeModeLabel: 'Interface theme',
         themeModeLight: 'Light',
         themeModeDark: 'Dark',
         themeModeSystem: 'System',
@@ -32,11 +32,11 @@ const HEADER_MESSAGES = defineMessages({
         searchByServices: 'Поиск по сервисам и их разделам',
         services: 'Сервисы',
         user: 'Пользователь',
-        logout: 'Выйти',
+        logout: 'Выйти из аккаунта',
         noData: 'Нет данных',
         noDataFound: 'Ничего не найдено',
         dragGroup: 'Перетащить группу',
-        themeModeLabel: 'Тема',
+        themeModeLabel: 'Тема интерфейса',
         themeModeLight: 'Светлая',
         themeModeDark: 'Тёмная',
         themeModeSystem: 'Системная',

package/dist/esm/style.css

@@ -21,7 +21,6 @@
   align-items:center;
   box-sizing:border-box;
   height:var(--sn-primitive-dimension-24, 24px);
-  border-bottom:var(--sn-primitive-strokeWeight-strokeRegular, 1px) solid var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
 }
 
 .left{
@@ -38,6 +37,14 @@
   align-items:center;
   height:100%;
 }
+
+.header[data-mobile] .top{
+  padding:var(--sn-primitive-dimension-0, 0px);
+}
+.header[data-mobile] .left,
+.header[data-mobile] .right{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 .logoImg{
   width:auto;
   min-height:var(--sn-primitive-dimension-24, 24px);
@@ -76,6 +83,7 @@
 .logo{
   position:relative;
   flex-shrink:0;
+  box-sizing:border-box;
 }
 .logo:active:not([data-disabled]) .iconDefault{
   opacity:0;
@@ -104,6 +112,7 @@
 }
 
 .root{
+  box-sizing:border-box;
   width:100%;
   min-width:0;
 }
@@ -158,6 +167,7 @@
   gap:var(--sn-primitive-dimension-8, 8px);
   align-items:center;
   justify-content:space-between;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   min-height:var(--sn-primitive-dimension-32, 32px);
@@ -301,7 +311,7 @@
 }
 @media (hover: hover){
   .header:hover{
-    background-color:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+    background-color:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
   }
   .header:hover .headerActions{
     pointer-events:auto;
@@ -324,6 +334,7 @@
   overflow-x:clip;
   display:flex;
   flex-direction:column;
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-12, 12px);
@@ -383,6 +394,12 @@
   grid-template-columns:repeat(3, minmax(auto, 1fr));
   gap:var(--sn-primitive-dimension-4, 4px);
 }
+.groupBody:not([data-mobile]):not([data-subcategory-body]){
+  padding:var(--sn-primitive-dimension-4, 4px);
+}
+.groupBody:not([data-mobile]):not([data-show-description]){
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 @container (width <= 728px){
   .groupBody:not([data-mobile]){
     grid-template-columns:repeat(2, minmax(auto, 1fr));
@@ -399,7 +416,7 @@
 }
 
 .decoration{
-  --highlight-border-width:1px;
+  --highlight-border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
   position:absolute;
   top:0;
   left:0;
@@ -590,16 +607,18 @@
 
 .listScrollInner{
   height:100%;
-  max-height:calc(var(--sn-primitive-dimension-32, 32px) * 12 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-32, 32px) + var(--sn-primitive-dimension-4, 4px)) * 12 + var(--sn-primitive-dimension-8, 8px));
 }
 .listScrollInner[data-mobile]{
-  max-height:calc(var(--sn-primitive-dimension-40, 40px) * 6 + var(--sn-primitive-dimension-4, 4px) + var(--sn-primitive-dimension-8, 8px));
+  max-height:calc((var(--sn-primitive-dimension-40, 40px) + var(--sn-primitive-dimension-4, 4px)) * 6 + var(--sn-primitive-dimension-8, 8px));
 }
 
 .list{
   display:flex;
   flex-direction:column;
+  gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-8, 8px) var(--sn-primitive-dimension-8, 8px);
 }
@@ -625,6 +644,7 @@
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
   align-items:stretch;
+  box-sizing:border-box;
   width:100%;
   padding:var(--sn-primitive-dimension-8, 8px);
 }
@@ -705,13 +725,14 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-4, 4px);
+  box-sizing:border-box;
   width:100%;
   min-width:0;
   padding:var(--sn-primitive-dimension-16, 16px);
 }
 
 .menu{
-  --snack-menu-header-height:40px;
+  --snack-menu-header-height:var(--sn-primitive-dimension-40, 40px);
   --snack-menu-left-width:263px;
   position:relative;
   height:100vh;
@@ -743,19 +764,17 @@
   box-sizing:border-box;
   background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-brand-palette-gray-90, #eeeff3)));
 }
+.container[data-mobile]{
+  gap:var(--sn-primitive-dimension-0, 0px);
+}
 
 .closeButton{
   flex-grow:1;
   flex-shrink:1;
   justify-content:flex-start;
 }
-.densityScope{
-  display:contents;
-}
-
 .menuHeader{
   height:var(--sn-primitive-dimension-40, 40px);
-  padding:0 var(--sn-primitive-dimension-4, 4px);
 }
 
 .rightContent{
@@ -773,6 +792,7 @@
   display:flex;
   flex-direction:column;
   gap:var(--sn-primitive-dimension-8, 8px);
+  box-sizing:border-box;
   min-height:100%;
   margin-top:calc(var(--sn-primitive-dimension-40, 40px) + var(--sn-divider-anatomy-container-height, var(--sn-primitive-dimension-1, 1px)));
   padding:var(--sn-primitive-dimension-16, 16px);
@@ -784,17 +804,17 @@
   animation-fill-mode:forwards;
 }
 .wrapper[data-animation-type=fade-slide-up-right]{
-  transform:translate(-12px, 4px);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up-right;
 }
 .wrapper[data-animation-type=fade-slide-up]{
-  transform:translate(0, 4px);
+  transform:translate(0, var(--sn-primitive-dimension-4, 4px));
   opacity:0;
   animation-name:fade-slide-up;
 }
 .wrapper[data-animation-type=slide-right]{
-  transform:translate(-12px, 0);
+  transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   animation-name:slide-right;
 }
 .wrapper[data-animation-type=fade-in]{
@@ -811,7 +831,7 @@
 }
 @keyframes fade-slide-up{
   0%{
-    transform:translate(0, 4px);
+    transform:translate(0, var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -821,7 +841,7 @@
 }
 @keyframes fade-slide-up-right{
   0%{
-    transform:translate(-12px, 4px);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), var(--sn-primitive-dimension-4, 4px));
     opacity:0;
   }
   100%{
@@ -831,7 +851,7 @@
 }
 @keyframes slide-right{
   0%{
-    transform:translate(-12px, 0);
+    transform:translate(calc(-1 * var(--sn-primitive-dimension-12, 12px)), 0);
   }
   100%{
     transform:translate(0, 0);
@@ -851,7 +871,9 @@
 }
 .searchWrap:not([data-mobile]){
   flex:1 1 auto;
-  padding:var(--sn-primitive-dimension-2, 2px) var(--sn-primitive-dimension-10, 10px);
+  box-sizing:border-box;
+  margin:0 var(--sn-primitive-dimension-4, 4px);
+  padding:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-12, 12px);
 }
 
 .search{
@@ -881,13 +903,15 @@
   display:flex;
   align-items:center;
   justify-content:center;
+  box-sizing:border-box;
   width:var(--sn-primitive-dimension-24, 24px);
   height:var(--sn-primitive-dimension-24, 24px);
   border-radius:var(--sn-density-radius-2xs, var(--sn-platform-comfort-radius-2xs, var(--sn-primitive-dimension-4, 4px)));
-  background:var(--sn-theme-color-neutral-decor, var(--sn-brand-color-neutral-80, var(--sn-brand-palette-gray-80, #e3e5ed)));
+  color:var(--sn-theme-color-neutral-onAccent, var(--sn-brand-color-neutral-99, var(--sn-brand-palette-gray-99, #ffffff)));
+  background:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #8b8fa7)));
 }
 .userMenuDroplist{
-  width:272px;
+  width:256px;
 }
 
 .userMenuTrigger{