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

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.
@@ -25,8 +25,7 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
25
25
  const { t } = locale_1.headerLocale.useTranslations();
26
26
  const showDescription = (0, react_1.useDeferredValue)(preferences?.showDescription.value ?? false);
27
27
  const segmentPrefsById = (0, react_1.useMemo)(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
28
- const visibleSegments = (0, react_1.useMemo)(() => segments.filter(segment => segment.items.some(group => (0, utils_2.getLinksGroupVisibleItemsCount)(group) > 0)), [segments]);
29
- const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
28
+ const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
30
29
  const [segmentId = defaultSegmentId, setSegmentId] = (0, utils_1.useValueControl)({
31
30
  value: activeSegmentId,
32
31
  defaultValue: defaultSegmentId,
@@ -35,10 +34,10 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
35
34
  const isSearching = Boolean(searchValue);
36
35
  const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
37
36
  (0, react_1.useEffect)(() => {
38
- if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
37
+ if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
39
38
  setSegmentId(defaultSegmentId);
40
39
  }
41
- }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
40
+ }, [defaultSegmentId, segmentId, setSegmentId, segments]);
42
41
  const handleLinkClick = (0, react_1.useCallback)(({ disabled, onClick }, e) => {
43
42
  if (disabled) {
44
43
  e?.preventDefault();
@@ -79,11 +78,11 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
79
78
  }
80
79
  onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
81
80
  }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
82
- const segmentItems = (0, react_1.useMemo)(() => visibleSegments.map(segment => ({
81
+ const segmentItems = (0, react_1.useMemo)(() => segments.map(segment => ({
83
82
  value: segment.id,
84
83
  label: segment.label,
85
84
  icon: segment.icon,
86
- })), [visibleSegments]);
85
+ })), [segments]);
87
86
  const hasCards = visibleGroups.length > 0;
88
87
  const cards = (() => {
89
88
  if (loading) {
@@ -3,6 +3,7 @@
3
3
  gap:var(--sn-primitive-dimension-8, 8px);
4
4
  align-items:center;
5
5
  justify-content:space-between;
6
+ width:100%;
6
7
  min-width:0;
7
8
  min-height:var(--sn-primitive-dimension-32, 32px);
8
9
  }
@@ -50,6 +50,7 @@
50
50
  overflow-x:clip;
51
51
  display:flex;
52
52
  flex-direction:column;
53
+ width:100%;
53
54
  min-width:0;
54
55
  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);
55
56
  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
@@ -63,6 +63,7 @@
63
63
  display:flex;
64
64
  flex-direction:column;
65
65
  gap:var(--sn-primitive-dimension-4, 4px);
66
+ width:100%;
66
67
  min-width:0;
67
68
  padding:var(--sn-primitive-dimension-16, 16px);
68
69
  }
@@ -157,6 +157,7 @@
157
157
  gap:var(--sn-primitive-dimension-8, 8px);
158
158
  align-items:center;
159
159
  justify-content:space-between;
160
+ width:100%;
160
161
  min-width:0;
161
162
  min-height:var(--sn-primitive-dimension-32, 32px);
162
163
  }
@@ -297,6 +298,7 @@
297
298
  overflow-x:clip;
298
299
  display:flex;
299
300
  flex-direction:column;
301
+ width:100%;
300
302
  min-width:0;
301
303
  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);
302
304
  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
@@ -666,6 +668,7 @@
666
668
  display:flex;
667
669
  flex-direction:column;
668
670
  gap:var(--sn-primitive-dimension-4, 4px);
671
+ width:100%;
669
672
  min-width:0;
670
673
  padding:var(--sn-primitive-dimension-16, 16px);
671
674
  }
@@ -19,8 +19,7 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
19
19
  const { t } = headerLocale.useTranslations();
20
20
  const showDescription = useDeferredValue(preferences?.showDescription.value ?? false);
21
21
  const segmentPrefsById = useMemo(() => new Map((segmentPrefs ?? []).map(prefs => [prefs.id, prefs])), [segmentPrefs]);
22
- const visibleSegments = useMemo(() => segments.filter(segment => segment.items.some(group => getLinksGroupVisibleItemsCount(group) > 0)), [segments]);
23
- const defaultSegmentId = visibleSegments[0]?.id ?? segments[0]?.id ?? '';
22
+ const defaultSegmentId = activeSegmentId ?? segments[0]?.id ?? '';
24
23
  const [segmentId = defaultSegmentId, setSegmentId] = useValueControl({
25
24
  value: activeSegmentId,
26
25
  defaultValue: defaultSegmentId,
@@ -29,10 +28,10 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
29
28
  const isSearching = Boolean(searchValue);
30
29
  const enableServiceDrag = Boolean(favorite) && !isMobile && !isSearching;
31
30
  useEffect(() => {
32
- if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
31
+ if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
33
32
  setSegmentId(defaultSegmentId);
34
33
  }
35
- }, [defaultSegmentId, segmentId, setSegmentId, visibleSegments]);
34
+ }, [defaultSegmentId, segmentId, setSegmentId, segments]);
36
35
  const handleLinkClick = useCallback(({ disabled, onClick }, e) => {
37
36
  if (disabled) {
38
37
  e?.preventDefault();
@@ -73,11 +72,11 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
73
72
  }
74
73
  onExpandedChange([...new Set([...expandedIds, ...visibleIds])]);
75
74
  }, [allGroupsExpanded, expandedIds, onExpandedChange, visibleGroups]);
76
- const segmentItems = useMemo(() => visibleSegments.map(segment => ({
75
+ const segmentItems = useMemo(() => segments.map(segment => ({
77
76
  value: segment.id,
78
77
  label: segment.label,
79
78
  icon: segment.icon,
80
- })), [visibleSegments]);
79
+ })), [segments]);
81
80
  const hasCards = visibleGroups.length > 0;
82
81
  const cards = (() => {
83
82
  if (loading) {
@@ -3,6 +3,7 @@
3
3
  gap:var(--sn-primitive-dimension-8, 8px);
4
4
  align-items:center;
5
5
  justify-content:space-between;
6
+ width:100%;
6
7
  min-width:0;
7
8
  min-height:var(--sn-primitive-dimension-32, 32px);
8
9
  }
@@ -50,6 +50,7 @@
50
50
  overflow-x:clip;
51
51
  display:flex;
52
52
  flex-direction:column;
53
+ width:100%;
53
54
  min-width:0;
54
55
  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);
55
56
  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
@@ -63,6 +63,7 @@
63
63
  display:flex;
64
64
  flex-direction:column;
65
65
  gap:var(--sn-primitive-dimension-4, 4px);
66
+ width:100%;
66
67
  min-width:0;
67
68
  padding:var(--sn-primitive-dimension-16, 16px);
68
69
  }
@@ -157,6 +157,7 @@
157
157
  gap:var(--sn-primitive-dimension-8, 8px);
158
158
  align-items:center;
159
159
  justify-content:space-between;
160
+ width:100%;
160
161
  min-width:0;
161
162
  min-height:var(--sn-primitive-dimension-32, 32px);
162
163
  }
@@ -297,6 +298,7 @@
297
298
  overflow-x:clip;
298
299
  display:flex;
299
300
  flex-direction:column;
301
+ width:100%;
300
302
  min-width:0;
301
303
  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);
302
304
  border-radius:var(--sn-density-radius-2xs, var(--sn-primitive-dimension-4, 4px));
@@ -666,6 +668,7 @@
666
668
  display:flex;
667
669
  flex-direction:column;
668
670
  gap:var(--sn-primitive-dimension-4, 4px);
671
+ width:100%;
669
672
  min-width:0;
670
673
  padding:var(--sn-primitive-dimension-16, 16px);
671
674
  }