@cloud-ru/ds-uikit-product-header 1.1.1-preview-e46694af.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-uikit-product-header",
3
- "version": "1.1.1-preview-e46694af.0",
3
+ "version": "1.1.1",
4
4
  "description": "Продуктовая шапка консоли — HeaderLayout, MainMenu, UserMenu, Logo, PathBreadcrumbs и PlatformLogo.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -45,31 +45,31 @@
45
45
  "@dnd-kit/utilities": "^3.2.2",
46
46
  "classnames": "^2.5.1",
47
47
  "fuse.js": "^7.1.0",
48
- "@cloud-ru/ds-accordion": "1.0.2",
49
- "@cloud-ru/ds-adaptive": "1.0.1",
50
- "@cloud-ru/ds-avatar": "1.0.1",
51
- "@cloud-ru/ds-breadcrumbs": "1.0.4",
52
- "@cloud-ru/ds-button": "1.0.1",
53
- "@cloud-ru/ds-divider": "1.0.1",
54
- "@cloud-ru/ds-drag-and-drop": "1.1.1",
55
- "@cloud-ru/ds-drawer": "1.0.2",
56
- "@cloud-ru/ds-icons": "1.0.1",
57
- "@cloud-ru/ds-info-block": "1.0.1",
58
- "@cloud-ru/ds-list": "1.1.3",
59
- "@cloud-ru/ds-locale": "1.0.0",
60
- "@cloud-ru/ds-search": "1.0.2",
61
- "@cloud-ru/ds-segment-control": "1.0.1",
62
- "@cloud-ru/ds-skeleton": "1.0.1",
63
- "@cloud-ru/ds-theme": "1.0.0",
64
- "@cloud-ru/ds-tooltip": "1.0.1",
65
- "@cloud-ru/ds-typography": "1.0.0",
66
- "@cloud-ru/ds-uikit-product-card-predefined": "2.0.0",
67
- "@cloud-ru/ds-uikit-product-switch-row": "1.0.2",
68
- "@cloud-ru/ds-uikit-product-title-clickable": "1.0.1",
69
- "@cloud-ru/ds-utils": "1.1.0",
70
- "@cloud-ru/ds-modal": "1.0.1",
71
- "@cloud-ru/ds-promo-tag": "1.0.1",
72
- "@cloud-ru/ds-scroll": "1.0.1"
48
+ "@cloud-ru/ds-accordion": "^1.0.3",
49
+ "@cloud-ru/ds-adaptive": "^1.0.1",
50
+ "@cloud-ru/ds-avatar": "^1.0.1",
51
+ "@cloud-ru/ds-button": "^1.0.1",
52
+ "@cloud-ru/ds-breadcrumbs": "^1.0.5",
53
+ "@cloud-ru/ds-divider": "^1.0.1",
54
+ "@cloud-ru/ds-drag-and-drop": "^1.1.1",
55
+ "@cloud-ru/ds-drawer": "^1.0.3",
56
+ "@cloud-ru/ds-icons": "^1.0.1",
57
+ "@cloud-ru/ds-info-block": "^1.0.1",
58
+ "@cloud-ru/ds-list": "^1.1.4",
59
+ "@cloud-ru/ds-locale": "^1.0.0",
60
+ "@cloud-ru/ds-modal": "^1.0.2",
61
+ "@cloud-ru/ds-promo-tag": "^1.0.1",
62
+ "@cloud-ru/ds-scroll": "^1.0.1",
63
+ "@cloud-ru/ds-search": "^1.0.2",
64
+ "@cloud-ru/ds-segment-control": "^1.0.2",
65
+ "@cloud-ru/ds-skeleton": "^1.0.1",
66
+ "@cloud-ru/ds-theme": "^1.0.0",
67
+ "@cloud-ru/ds-tooltip": "^1.0.2",
68
+ "@cloud-ru/ds-typography": "^1.0.0",
69
+ "@cloud-ru/ds-uikit-product-card-predefined": "^2.0.1",
70
+ "@cloud-ru/ds-uikit-product-switch-row": "^1.0.3",
71
+ "@cloud-ru/ds-uikit-product-title-clickable": "^1.0.2",
72
+ "@cloud-ru/ds-utils": "^1.1.0"
73
73
  },
74
74
  "publishConfig": {
75
75
  "access": "public"
@@ -91,7 +91,12 @@ export function Content({
91
91
 
92
92
  const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
93
93
 
94
- const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
94
+ const visibleSegments = useMemo(
95
+ () => segments.filter(segment => segment.items.some(group => getLinksGroupVisibleItemsCount(group) > 0)),
96
+ [segments],
97
+ );
98
+
99
+ const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
95
100
 
96
101
  const [segmentId = defaultSegmentId, setSegmentId] = useValueControl<string>({
97
102
  value: activeSegmentId,
@@ -103,10 +108,10 @@ export function Content({
103
108
  const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
104
109
 
105
110
  useEffect(() => {
106
- if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
111
+ if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
107
112
  setSegmentId(defaultSegmentId);
108
113
  }
109
- }, [defaultSegmentId, segmentId, setSegmentId, segments]);
114
+ }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
110
115
 
111
116
  const handleLinkClick = useCallback(
112
117
  (
@@ -174,12 +179,12 @@ export function Content({
174
179
 
175
180
  const segmentItems = useMemo(
176
181
  () =>
177
- segments.map(segment => ({
182
+ visibleSegments.map(segment => ({
178
183
  value: segment.id,
179
184
  label: segment.label,
180
185
  icon: segment.icon,
181
186
  })),
182
- [segments],
187
+ [visibleSegments],
183
188
  );
184
189
 
185
190
  const hasCards = visibleGroups.length > 0;
@@ -6,7 +6,6 @@
6
6
  align-items: center;
7
7
  justify-content: space-between;
8
8
 
9
- width: 100%;
10
9
  min-width: 0;
11
10
  min-height: base.$sn-primitive-dimension-32;
12
11
  }
@@ -86,7 +86,6 @@ $map-block-color-decor: (
86
86
  display: flex;
87
87
  flex-direction: column;
88
88
 
89
- width: 100%;
90
89
  min-width: 0;
91
90
  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-8 base.$sn-primitive-dimension-8
92
91
  base.$sn-primitive-dimension-12;
@@ -94,6 +93,7 @@ $map-block-color-decor: (
94
93
 
95
94
  background-color: base.$sn-theme-color-neutral-background1Level;
96
95
 
96
+
97
97
  &[data-drag-preview] {
98
98
  cursor: grabbing;
99
99
 
@@ -188,7 +188,7 @@ $map-block-color-decor: (
188
188
  z-index: -1;
189
189
  }
190
190
 
191
- &[data-color-scheme='light'] {
191
+ &[data-color-scheme="light"] {
192
192
  --highlight-border-color-from: hsl(155deg 48% 42% / 100%);
193
193
  --highlight-border-color-to: hsl(155deg 48% 42% / 32%);
194
194
  --highlight-background-color-from: hsl(0deg 0% 99% / 20%);
@@ -196,7 +196,7 @@ $map-block-color-decor: (
196
196
  --highlight-background-color: hsl(0deg 0% 99% / 100%);
197
197
  }
198
198
 
199
- &[data-color-scheme='dark'] {
199
+ &[data-color-scheme="dark"] {
200
200
  --highlight-border-color-from: hsl(153deg 30% 55% / 100%);
201
201
  --highlight-border-color-to: hsl(157deg 51% 19% / 100%);
202
202
  --highlight-background-color-from: hsl(240deg 14% 16% / 100%);
@@ -214,12 +214,7 @@ $map-block-color-decor: (
214
214
  border-radius: inherit;
215
215
 
216
216
  opacity: 0.64;
217
- background-image: linear-gradient(
218
- 90deg,
219
- var(--highlight-border-color-from) 0%,
220
- var(--highlight-border-color-to) 50%,
221
- var(--highlight-border-color-from) 100%
222
- );
217
+ background-image: linear-gradient(90deg, var(--highlight-border-color-from) 0%, var(--highlight-border-color-to) 50%, var(--highlight-border-color-from) 100%);
223
218
  }
224
219
  }
225
220
 
@@ -235,13 +230,11 @@ $map-block-color-decor: (
235
230
  background-color: transparent;
236
231
 
237
232
  [data-is-highlighted] & {
238
- inset: var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width)
239
- var(--highlight-border-width);
233
+ inset: var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width) var(--highlight-border-width);
240
234
  border-radius: calc(#{$group-border-radius} - var(--highlight-border-width));
241
- background:
242
- linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%),
243
- var(--highlight-background-color);
235
+ background: linear-gradient(90deg, var(--highlight-background-color-from) 2.29%, var(--highlight-background-color-to) 97.84%), var(--highlight-background-color);
244
236
  }
237
+
245
238
  }
246
239
 
247
240
  .colorMarker {
@@ -81,7 +81,6 @@
81
81
  flex-direction: column;
82
82
  gap: base.$sn-primitive-dimension-4;
83
83
 
84
- width: 100%;
85
84
  min-width: 0;
86
85
  padding: base.$sn-primitive-dimension-16;
87
86
  }