@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.
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +5 -6
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -0
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -0
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +1 -0
- package/dist/cjs/style.css +3 -0
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +5 -6
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -0
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -0
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +1 -0
- package/dist/esm/style.css +3 -0
- package/dist/tsconfig.cjs.tsbuildinfo +1 -1
- package/dist/tsconfig.esm.tsbuildinfo +1 -1
- package/package.json +26 -26
- package/src/components/MainMenu/helperComponents/Content/Content.tsx +5 -10
- package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.scss +1 -0
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +14 -7
- package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +1 -0
|
@@ -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
|
|
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 (!
|
|
37
|
+
if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
|
|
39
38
|
setSegmentId(defaultSegmentId);
|
|
40
39
|
}
|
|
41
|
-
}, [defaultSegmentId, segmentId, setSegmentId,
|
|
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)(() =>
|
|
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
|
-
})), [
|
|
85
|
+
})), [segments]);
|
|
87
86
|
const hasCards = visibleGroups.length > 0;
|
|
88
87
|
const cards = (() => {
|
|
89
88
|
if (loading) {
|
|
@@ -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));
|
package/dist/cjs/style.css
CHANGED
|
@@ -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
|
|
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 (!
|
|
31
|
+
if (!segments.some(segment => segment.id === segmentId) && defaultSegmentId) {
|
|
33
32
|
setSegmentId(defaultSegmentId);
|
|
34
33
|
}
|
|
35
|
-
}, [defaultSegmentId, segmentId, setSegmentId,
|
|
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(() =>
|
|
75
|
+
const segmentItems = useMemo(() => segments.map(segment => ({
|
|
77
76
|
value: segment.id,
|
|
78
77
|
label: segment.label,
|
|
79
78
|
icon: segment.icon,
|
|
80
|
-
})), [
|
|
79
|
+
})), [segments]);
|
|
81
80
|
const hasCards = visibleGroups.length > 0;
|
|
82
81
|
const cards = (() => {
|
|
83
82
|
if (loading) {
|
|
@@ -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));
|
package/dist/esm/style.css
CHANGED
|
@@ -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
|
}
|