@cloud-ru/ds-uikit-product-header 1.1.1 → 1.1.2-preview-39658112.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.
Files changed (20) hide show
  1. package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js +6 -7
  2. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -0
  3. package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -0
  4. package/dist/cjs/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +1 -0
  5. package/dist/cjs/components/PathBreadcrumbs/styles.module.css +3 -0
  6. package/dist/cjs/style.css +6 -0
  7. package/dist/esm/components/MainMenu/helperComponents/Content/Content.js +6 -7
  8. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css +1 -0
  9. package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css +1 -0
  10. package/dist/esm/components/MainMenu/helperComponents/MenuDesktop/styles.module.css +1 -0
  11. package/dist/esm/components/PathBreadcrumbs/styles.module.css +3 -0
  12. package/dist/esm/style.css +6 -0
  13. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  14. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  15. package/package.json +26 -26
  16. package/src/components/MainMenu/helperComponents/Content/Content.tsx +6 -11
  17. package/src/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.scss +1 -0
  18. package/src/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.scss +14 -7
  19. package/src/components/MainMenu/helperComponents/MenuDesktop/styles.module.scss +1 -0
  20. package/src/components/PathBreadcrumbs/styles.module.scss +4 -0
package/dist/cjs/components/MainMenu/helperComponents/Content/Content.js CHANGED
@@ -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) {
@@ -97,5 +96,5 @@ function Content({ searchValue, search, rightTop, segments, searchGroups = [], s
97
96
  appearance: 'neutral',
98
97
  }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? constants_1.TEST_IDS.noDataFound : constants_1.TEST_IDS.noData }));
99
98
  })();
100
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": !hasCards || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
99
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [search, (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [isMobile && rightTop, (0, jsx_runtime_1.jsx)(ContentToolbar_1.ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
101
100
  }
package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css CHANGED
@@ -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
  }
package/dist/cjs/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css CHANGED
@@ -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/components/MainMenu/helperComponents/MenuDesktop/styles.module.css CHANGED
@@ -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
  }
package/dist/cjs/components/PathBreadcrumbs/styles.module.css CHANGED
@@ -1,4 +1,7 @@
1
1
  .breadcrumbs{
2
+ display:flex;
3
+ align-items:center;
2
4
  min-width:0;
5
+ height:100%;
3
6
  padding:0 var(--sn-primitive-dimension-8, 8px) !important;
4
7
  }
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
  }
@@ -827,7 +830,10 @@
827
830
  min-width:0;
828
831
  }
829
832
  .breadcrumbs{
833
+ display:flex;
834
+ align-items:center;
830
835
  min-width:0;
836
+ height:100%;
831
837
  padding:0 var(--sn-primitive-dimension-8, 8px) !important;
832
838
  }
833
839
  .container{
package/dist/esm/components/MainMenu/helperComponents/Content/Content.js CHANGED
@@ -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) {
@@ -91,5 +90,5 @@ export function Content({ searchValue, search, rightTop, segments, searchGroups
91
90
  appearance: 'neutral',
92
91
  }, content: isSearching ? t('noDataFound') : t('noData'), "data-test-id": isSearching ? TEST_IDS.noDataFound : TEST_IDS.noData }));
93
92
  })();
94
- return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": !hasCards || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
93
+ return (_jsxs(_Fragment, { children: [search, _jsxs("div", { className: cn(styles.content, className), "data-mobile": isMobile || undefined, "data-empty": (!loading && !hasCards) || undefined, children: [!isSearching && (_jsxs(_Fragment, { children: [isMobile && rightTop, _jsx(ContentToolbar, { segment: segmentId, onSegmentChange: setSegmentId, segmentItems: segmentItems, allGroupsExpanded: allGroupsExpanded, onToggleAllGroupsExpanded: handleToggleAllGroupsExpanded, preferences: preferences, isMobile: isMobile }), !isMobile && rightTop] })), cards, footer] })] }));
95
94
  }
package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/ContentToolbar/styles.module.css CHANGED
@@ -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
  }
package/dist/esm/components/MainMenu/helperComponents/Content/helperComponents/SortableGroup/styles.module.css CHANGED
@@ -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/components/MainMenu/helperComponents/MenuDesktop/styles.module.css CHANGED
@@ -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
  }
package/dist/esm/components/PathBreadcrumbs/styles.module.css CHANGED
@@ -1,4 +1,7 @@
1
1
  .breadcrumbs{
2
+ display:flex;
3
+ align-items:center;
2
4
  min-width:0;
5
+ height:100%;
3
6
  padding:0 var(--sn-primitive-dimension-8, 8px) !important;
4
7
  }
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
  }
@@ -827,7 +830,10 @@
827
830
  min-width:0;
828
831
  }
829
832
  .breadcrumbs{
833
+ display:flex;
834
+ align-items:center;
830
835
  min-width:0;
836
+ height:100%;
831
837
  padding:0 var(--sn-primitive-dimension-8, 8px) !important;
832
838
  }
833
839
  .container{