@cloud-ru/ds-uikit-product-header 1.3.2 → 1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-uikit-product-header",
-  "version": "1.3.2",
+  "version": "1.3.3",
   "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
   "repository": {
     "type": "git",
@@ -47,29 +47,29 @@
     "fuse.js": "^7.1.0",
     "@cloud-ru/ds-accordion": "^1.0.6",
     "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-avatar": "^1.0.3",
     "@cloud-ru/ds-breadcrumbs": "^1.0.13",
-    "@cloud-ru/ds-button": "^1.0.2",
-    "@cloud-ru/ds-divider": "^1.0.1",
     "@cloud-ru/ds-drag-and-drop": "^1.1.1",
+    "@cloud-ru/ds-avatar": "^1.0.3",
     "@cloud-ru/ds-drawer": "^1.1.1",
-    "@cloud-ru/ds-icons": "^1.1.0",
+    "@cloud-ru/ds-button": "^1.0.2",
+    "@cloud-ru/ds-divider": "^1.0.1",
     "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-list": "^2.1.2",
-    "@cloud-ru/ds-locale": "^1.0.0",
     "@cloud-ru/ds-modal": "^1.1.1",
+    "@cloud-ru/ds-list": "^2.1.2",
     "@cloud-ru/ds-portal-context": "^1.0.1",
+    "@cloud-ru/ds-locale": "^1.0.0",
     "@cloud-ru/ds-promo-tag": "^1.0.1",
     "@cloud-ru/ds-scroll": "^1.0.2",
+    "@cloud-ru/ds-icons": "^1.1.0",
     "@cloud-ru/ds-search": "^1.0.6",
     "@cloud-ru/ds-segment-control": "^1.0.5",
     "@cloud-ru/ds-skeleton": "^1.0.1",
     "@cloud-ru/ds-tooltip": "^1.0.4",
-    "@cloud-ru/ds-theme": "^1.1.0",
     "@cloud-ru/ds-typography": "^1.0.0",
+    "@cloud-ru/ds-theme": "^1.1.0",
     "@cloud-ru/ds-uikit-product-card-predefined": "^3.0.6",
-    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.5",
     "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.8",
+    "@cloud-ru/ds-uikit-product-switch-row": "^1.0.5",
     "@cloud-ru/ds-utils": "^1.1.0"
   },
   "publishConfig": {

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

@@ -280,6 +280,7 @@ export function Content({
               onToggleAllGroupsExpanded={handleToggleAllGroupsExpanded}
               preferences={preferences}
               isMobile={isMobile}
+              loading={loading}
             />
 
             {!isMobile && rightTop}

package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/ContentToolbar.tsx

@@ -2,6 +2,7 @@ import { Button } from '@cloud-ru/ds-button';
 import { CollapseVerticalSVG, ExpandVerticalSVG, SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
 import { Modal } from '@cloud-ru/ds-modal';
 import { SegmentControl } from '@cloud-ru/ds-segment-control';
+import { Skeleton, WithSkeleton } from '@cloud-ru/ds-skeleton';
 import { SwitchRow } from '@cloud-ru/ds-uikit-product-switch-row';
 import { useValueControl } from '@cloud-ru/ds-utils';
 import { ReactNode, startTransition } from 'react';
@@ -33,6 +34,9 @@ export type ContentToolbarProps = {
   preferences?: MainMenuPreferencesProps;
 
   isMobile?: boolean;
+
+  /** Флаг загрузки данных — сегменты подгружаются с бэка, поэтому SegmentControl тоже уходит в скелетон. */
+  loading?: boolean;
 };
 
 export function ContentToolbar({
@@ -43,6 +47,7 @@ export function ContentToolbar({
   onToggleAllGroupsExpanded,
   preferences,
   isMobile,
+  loading,
 }: ContentToolbarProps) {
   const { t } = headerLocale.useTranslations();
   const [open = false, setOpen] = useValueControl<boolean>({
@@ -62,19 +67,32 @@ export function ContentToolbar({
   return (
     <div className={styles.root} data-test-id={TEST_IDS.toolbar}>
       {hasSegmentItems && (
-        <SegmentControl
-          size='m'
-          outline
-          value={segment}
-          onChange={onSegmentChange}
-          className={styles.segmentControl}
-          data-test-id={TEST_IDS.segmentControl}
-          items={segmentItems}
-          width={isMobile ? 'full' : 'auto'}
-        />
+        <WithSkeleton
+          loading={loading}
+          skeleton={
+            <div
+              className={styles.segmentControlSkeleton}
+              data-test-id={TEST_IDS.segmentControl}
+              data-mobile={isMobile || undefined}
+            >
+              <Skeleton className={styles.segmentControlSkeletonBlock} />
+            </div>
+          }
+        >
+          <SegmentControl
+            size='m'
+            outline
+            value={segment}
+            onChange={onSegmentChange}
+            className={styles.segmentControl}
+            data-test-id={TEST_IDS.segmentControl}
+            items={segmentItems}
+            width={isMobile ? 'full' : 'auto'}
+          />
+        </WithSkeleton>
       )}
 
-      {(preferences || !isMobile) && (
+      {(preferences || !isMobile) && !loading && (
         <div className={styles.actions}>
           {preferences && (
             <>

package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.scss

@@ -1,3 +1,4 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/segmentControl.module' as segmentControl;
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 
 .root {
@@ -15,6 +16,27 @@
   flex-shrink: 0;
 }
 
+.segmentControlSkeleton {
+  display: flex;
+  flex-shrink: 0;
+  // Ширина placeholder'а не выводится из токена: `SegmentControl` шириной `auto` считается по
+  // тексту лейблов сегментов, которых на момент загрузки ещё нет — значение приблизительное.
+  width: 264px;
+
+  // Высота — реальный токен анатомии SegmentControl(size='m'), а не подобранное на глаз число.
+  height: base.simple-var(segmentControl.$segmentControl, 'anatomy', 'size', 'm', 'segment', 'container', 'height');
+
+  &[data-mobile] {
+    width: 100%;
+  }
+}
+
+.segmentControlSkeletonBlock {
+  width: 100%;
+  height: 100%;
+  border-radius: base.simple-var(segmentControl.$segmentControl, 'anatomy', 'size', 'm', 'container', 'border-radius');
+}
+
 .actions {
   display: flex;
   flex-shrink: 0;

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SortableGroupSkeleton.tsx

@@ -11,7 +11,7 @@ export function SortableGroupSkeleton({ isMobile }: SortableGroupSkeletonProps)
     <div className={styles.group}>
       <SkeletonContext.Provider value={true}>
         <div className={styles.skeletonTitle}>
-          <SkeletonText lines={1} width={isMobile ? '50%' : '30%'} />
+          <SkeletonText variant='title' size='m' lines={1} width={isMobile ? '50%' : '30%'} />
         </div>
         <div className={styles.skeletonBody}>
           <div className={styles.groupBody} data-mobile={isMobile || undefined}>

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategory.tsx

@@ -31,12 +31,16 @@ export function SubCategory({
   const nestedGroupId = getNestedServiceGroupId(groupId, service.id);
   const nestedItems = useMemo(() => service.items?.filter(item => !item.hidden) ?? [], [service.items]);
 
+  const isExpandableEnabled = service.expandableEnabled ?? false;
+
   // Раскрытие подкатегории — локальное uncontrolled состояние: наружу его пока не выводим.
   const [isExpanded, setIsExpanded] = useState<string | undefined>(subcategoryId);
 
   const handleExpandedChange = useCallback(() => {
-    setIsExpanded(isExpanded ? undefined : subcategoryId);
-  }, [isExpanded, subcategoryId]);
+    if (isExpandableEnabled) {
+      setIsExpanded(isExpanded ? undefined : subcategoryId);
+    }
+  }, [isExpanded, subcategoryId, isExpandableEnabled]);
 
   return (
     <div className={styles.subcategory} data-test-id={`${TEST_IDS.subcategory}-${service.id}`}>

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/SubCategoryTitle.tsx

@@ -56,7 +56,7 @@ export function SubCategoryTitle({
 
   if (expandable?.value) {
     return (
-      <div className={styles.subcategoryTitle}>
+      <div className={styles.subcategoryTitle} data-mobile={isMobile || undefined}>
         {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
         <div className={styles.subcategoryTitleRow} onKeyDown={handleKeyDown}>
           <TitleClickable
@@ -73,6 +73,7 @@ export function SubCategoryTitle({
           <CardActionsSurface
             className={styles.subcategoryTitleActions}
             actionsVisibility='always'
+            actionsSize={isMobile ? 's' : 'm'}
             tooltip={
               hasTooltip
                 ? {
@@ -115,7 +116,14 @@ export function SubCategoryTitle({
   }
 
   return (
-    <div className={styles.subcategoryTitleDraggable} onPointerDown={stopEventPropagation}>
+    // Карточка — ссылка `<a>`: клик по ней бы долетал до `onClick={toggleOpen}` заголовка
+    // родительского CollapseBlockTertiary (см. TODO там) и лишний раз переключал аккордеон.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    <div
+      className={styles.subcategoryTitleDraggable}
+      onPointerDown={stopEventPropagation}
+      onClick={stopEventPropagation}
+    >
       <DraggableServiceCard
         groupId={groupId}
         service={service}

package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/components/SubCategory/styles.module.scss

@@ -41,6 +41,13 @@
       visibility: visible;
     }
   }
+
+  // На мобилке ховера не бывает — действия карточки видны всегда (actionsVisibility='always').
+  &[data-mobile] {
+    .subcategoryTitleActions {
+      visibility: visible;
+    }
+  }
 }
 
 .subcategoryTitleRow {

package/src/components/MainMenu/types.ts

@@ -38,6 +38,8 @@ export type InnerLink = {
   badge?: CardServiceLightProps['promoTag'];
   /** Разрешено ли добавление карточки в избранное. default=true - разрешено */
   favoritesEnabled?: boolean;
+  /** Разрешено ли раскрытие карточки. default=false - Запрещено */
+  expandableEnabled?: boolean;
   /**
    * Вложенные сервисы подкатегории.
    *