@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/CHANGELOG.md +4 -0
- package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +6 -5
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +0 -1
- package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +0 -1
- package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +0 -1
- package/dist/cjs/style.css +0 -3
- package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +6 -5
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +0 -1
- package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +0 -1
- package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +0 -1
- package/dist/esm/style.css +0 -3
- 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 +10 -5
- package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.scss +0 -1
- package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +7 -14
- package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +0 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cloud-ru/ds-uikit-product-header",
|
|
3
|
-
"version": "1.1.1
|
|
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.
|
|
49
|
-
"@cloud-ru/ds-adaptive": "1.0.1",
|
|
50
|
-
"@cloud-ru/ds-avatar": "1.0.1",
|
|
51
|
-
"@cloud-ru/ds-
|
|
52
|
-
"@cloud-ru/ds-
|
|
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.
|
|
56
|
-
"@cloud-ru/ds-icons": "1.0.1",
|
|
57
|
-
"@cloud-ru/ds-info-block": "1.0.1",
|
|
58
|
-
"@cloud-ru/ds-list": "1.1.
|
|
59
|
-
"@cloud-ru/ds-locale": "1.0.0",
|
|
60
|
-
"@cloud-ru/ds-
|
|
61
|
-
"@cloud-ru/ds-
|
|
62
|
-
"@cloud-ru/ds-
|
|
63
|
-
"@cloud-ru/ds-
|
|
64
|
-
"@cloud-ru/ds-
|
|
65
|
-
"@cloud-ru/ds-
|
|
66
|
-
"@cloud-ru/ds-
|
|
67
|
-
"@cloud-ru/ds-
|
|
68
|
-
"@cloud-ru/ds-
|
|
69
|
-
"@cloud-ru/ds-
|
|
70
|
-
"@cloud-ru/ds-
|
|
71
|
-
"@cloud-ru/ds-
|
|
72
|
-
"@cloud-ru/ds-
|
|
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
|
|
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 (!
|
|
111
|
+
if (!visibleSegments.some(segment => segment.id === segmentId) && defaultSegmentId) {
|
|
107
112
|
setSegmentId(defaultSegmentId);
|
|
108
113
|
}
|
|
109
|
-
}, [defaultSegmentId, segmentId, setSegmentId,
|
|
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
|
-
|
|
182
|
+
visibleSegments.map(segment => ({
|
|
178
183
|
value: segment.id,
|
|
179
184
|
label: segment.label,
|
|
180
185
|
icon: segment.icon,
|
|
181
186
|
})),
|
|
182
|
-
[
|
|
187
|
+
[visibleSegments],
|
|
183
188
|
);
|
|
184
189
|
|
|
185
190
|
const hasCards = visibleGroups.length > 0;
|
|
@@ -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=
|
|
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=
|
|
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 {
|