@cloud-ru/ds-uikit-product-header 2.1.8-preview-5476af53.0 → 2.1.8-preview-e83d8cf4.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 (18) hide show
  1. package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.js +1 -1
  2. package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/styles.module.css +2 -3
  3. package/dist/cjs/components/UserMenu/hooks/useProfileItem.js +4 -7
  4. package/dist/cjs/components/UserMenu/styles.module.css +44 -0
  5. package/dist/cjs/style.css +46 -3
  6. package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.js +1 -1
  7. package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/styles.module.css +2 -3
  8. package/dist/esm/components/UserMenu/hooks/useProfileItem.js +5 -8
  9. package/dist/esm/components/UserMenu/styles.module.css +44 -0
  10. package/dist/esm/style.css +46 -3
  11. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  12. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  13. package/package.json +13 -13
  14. package/src/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.tsx +2 -2
  15. package/src/components/ListCustom/helperComponents/ListItemCustom/styles.module.scss +3 -7
  16. package/src/components/ListCustom/specs/readme.md +1 -1
  17. package/src/components/UserMenu/hooks/useProfileItem.tsx +11 -7
  18. package/src/components/UserMenu/styles.module.scss +41 -0
package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.js CHANGED
@@ -39,5 +39,5 @@ function ListItemCustom({ selectionMode = constants_1.SELECTION_MODE.None, check
39
39
  const showMarker = isSingle && checked && !isParentNode && !switchControl;
40
40
  const showCheckbox = isMultiple && !switchControl;
41
41
  const expandIconInteractive = Boolean(onExpandIconClick);
42
- return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, className), "data-selection-mode": selectionMode, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-open": open || undefined, children: [!disabled && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": dataTestId, ref: itemRef, className: styles_module_scss_1.default.listItem, onClick: onClick, onMouseDown: onMouseDown, tabIndex: tabIndex, "data-non-pointer": (inactive && !onClick) || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: onKeyDown, onFocus: onFocus, style: { '--level': level, ...style }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": checked || undefined, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, children: [dragHandle, showMarker && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.marker, "aria-hidden": true, "data-disabled": disabled || undefined }), showCheckbox && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 's', disabled: disabled, checked: checked, tabIndex: -1 }) })), (0, jsx_runtime_1.jsx)(ContentWrapperCustom_1.ContentWrapperCustom, { layout: 'item', beforeContent: beforeContent, afterContent: afterContent, label: structuredContent?.label, caption: structuredContent?.caption, description: structuredContent?.description, truncate: structuredContent?.truncate, contentNode: structuredContent ? undefined : contentNode, disabled: disabled }), switchControl, expandIcon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandCenteredWrapper, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.groupIndicator, "data-open": open || undefined, "data-disabled": disabled || undefined, "data-interactive": expandIconInteractive || undefined, "data-test-id": list_1.TEST_IDS.groupIndicator, onClick: onExpandIconClick, "aria-hidden": true, children: expandIcon }) }))] })] }));
42
+ return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, className), "data-selection-mode": selectionMode, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-open": open || undefined, children: [!disabled && (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": dataTestId, ref: itemRef, className: styles_module_scss_1.default.listItem, onClick: onClick, onMouseDown: onMouseDown, tabIndex: tabIndex, "data-non-pointer": (inactive && !onClick) || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: onKeyDown, onFocus: onFocus, style: { '--level': level, ...style }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": checked || undefined, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, children: [dragHandle, showMarker && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.marker, "aria-hidden": true, "data-disabled": disabled || undefined }), showCheckbox && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.checkboxCenterWrapper, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: 'xs', disabled: disabled, checked: checked, tabIndex: -1 }) })), (0, jsx_runtime_1.jsx)(ContentWrapperCustom_1.ContentWrapperCustom, { layout: 'item', beforeContent: beforeContent, afterContent: afterContent, label: structuredContent?.label, caption: structuredContent?.caption, description: structuredContent?.description, truncate: structuredContent?.truncate, contentNode: structuredContent ? undefined : contentNode, disabled: disabled }), switchControl, expandIcon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandCenteredWrapper, children: (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.groupIndicator, "data-open": open || undefined, "data-disabled": disabled || undefined, "data-interactive": expandIconInteractive || undefined, "data-test-id": list_1.TEST_IDS.groupIndicator, onClick: onExpandIconClick, "aria-hidden": true, children: expandIcon }) }))] })] }));
43
43
  }
package/dist/cjs/components/ListCustom/helperComponents/ListItemCustom/styles.module.css CHANGED
@@ -69,11 +69,10 @@
69
69
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
70
70
  }
71
71
 
72
- .checkbox{
72
+ .checkboxCenterWrapper{
73
73
  display:flex;
74
- flex-shrink:0;
75
74
  align-items:flex-start;
76
- padding:var(--sn-primitive-dimension-4, 4px);
75
+ padding:var(--sn-primitive-dimension-8, 8px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
77
76
  }
78
77
 
79
78
  .expandCenteredWrapper{
package/dist/cjs/components/UserMenu/hooks/useProfileItem.js CHANGED
@@ -7,17 +7,14 @@ exports.useProfileItem = useProfileItem;
7
7
  const jsx_runtime_1 = require("react/jsx-runtime");
8
8
  const avatar_1 = require("@cloud-ru/ds-avatar");
9
9
  const system_1 = require("@cloud-ru/ds-icons/interface/system");
10
+ const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
10
11
  const react_1 = require("react");
11
12
  const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
12
13
  function useProfileItem({ fullName = '', email = '', itemWrapRender, onClick, }) {
13
14
  return (0, react_1.useMemo)(() => ({
14
- content: {
15
- label: fullName,
16
- description: email,
17
- truncate: {
18
- description: 1,
19
- },
20
- },
15
+ // ReactNode: иначе ContentWrapperCustom сам рисует label с `regular-body-s`,
16
+ // а `className` айтема на `.label` не действует.
17
+ content: ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.userItemContent, children: [(0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.userItemHeadline, children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.userItemLabel, text: fullName, maxLines: 1 }) }), email ? (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { className: styles_module_scss_1.default.userItemDescription, text: email, maxLines: 1 }) : null] })),
21
18
  onClick,
22
19
  beforeContent: (0, jsx_runtime_1.jsx)(avatar_1.Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }),
23
20
  afterContent: (0, jsx_runtime_1.jsx)(system_1.SettingsSVG, { className: styles_module_scss_1.default.profileSettingsIcon }),
package/dist/cjs/components/UserMenu/styles.module.css CHANGED
@@ -13,4 +13,48 @@
13
13
  .logoutItem span,
14
14
  .logoutItem svg{
15
15
  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
16
+ }
17
+
18
+ .userItemContent{
19
+ display:flex;
20
+ flex:1 0 0;
21
+ flex-direction:column;
22
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
23
+ align-items:flex-start;
24
+ justify-content:center;
25
+ min-width:0;
26
+ }
27
+
28
+ .userItemHeadline{
29
+ display:flex;
30
+ align-items:center;
31
+ align-self:stretch;
32
+ width:100%;
33
+ min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
34
+ }
35
+
36
+ .userItemLabel{
37
+ overflow:hidden;
38
+ min-width:0;
39
+ max-width:100%;
40
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
41
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
42
+ font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
43
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
44
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
45
+ letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
46
+ paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
47
+ }
48
+
49
+ .userItemDescription{
50
+ overflow:hidden;
51
+ min-width:0;
52
+ max-width:100%;
53
+ color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
54
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
55
+ font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
56
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
57
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
58
+ letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
59
+ paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
16
60
  }
package/dist/cjs/style.css CHANGED
@@ -279,11 +279,10 @@
279
279
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
280
280
  }
281
281
 
282
- .checkbox{
282
+ .checkboxCenterWrapper{
283
283
  display:flex;
284
- flex-shrink:0;
285
284
  align-items:flex-start;
286
- padding:var(--sn-primitive-dimension-4, 4px);
285
+ padding:var(--sn-primitive-dimension-8, 8px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
287
286
  }
288
287
 
289
288
  .expandCenteredWrapper{
@@ -1429,4 +1428,48 @@
1429
1428
  .logoutItem span,
1430
1429
  .logoutItem svg{
1431
1430
  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
1431
+ }
1432
+
1433
+ .userItemContent{
1434
+ display:flex;
1435
+ flex:1 0 0;
1436
+ flex-direction:column;
1437
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
1438
+ align-items:flex-start;
1439
+ justify-content:center;
1440
+ min-width:0;
1441
+ }
1442
+
1443
+ .userItemHeadline{
1444
+ display:flex;
1445
+ align-items:center;
1446
+ align-self:stretch;
1447
+ width:100%;
1448
+ min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
1449
+ }
1450
+
1451
+ .userItemLabel{
1452
+ overflow:hidden;
1453
+ min-width:0;
1454
+ max-width:100%;
1455
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
1456
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
1457
+ font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
1458
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
1459
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
1460
+ letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
1461
+ paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1462
+ }
1463
+
1464
+ .userItemDescription{
1465
+ overflow:hidden;
1466
+ min-width:0;
1467
+ max-width:100%;
1468
+ color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
1469
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
1470
+ font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
1471
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
1472
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
1473
+ letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1474
+ paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1432
1475
  }
package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/ListItemCustom.js CHANGED
@@ -33,5 +33,5 @@ export function ListItemCustom({ selectionMode = SELECTION_MODE.None, checked =
33
33
  const showMarker = isSingle && checked && !isParentNode && !switchControl;
34
34
  const showCheckbox = isMultiple && !switchControl;
35
35
  const expandIconInteractive = Boolean(onExpandIconClick);
36
- return (_jsxs("div", { className: cn(styles.itemWrapper, className), "data-selection-mode": selectionMode, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-open": open || undefined, children: [!disabled && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": dataTestId, ref: itemRef, className: styles.listItem, onClick: onClick, onMouseDown: onMouseDown, tabIndex: tabIndex, "data-non-pointer": (inactive && !onClick) || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: onKeyDown, onFocus: onFocus, style: { '--level': level, ...style }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": checked || undefined, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, children: [dragHandle, showMarker && _jsx("div", { className: styles.marker, "aria-hidden": true, "data-disabled": disabled || undefined }), showCheckbox && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: 's', disabled: disabled, checked: checked, tabIndex: -1 }) })), _jsx(ContentWrapperCustom, { layout: 'item', beforeContent: beforeContent, afterContent: afterContent, label: structuredContent?.label, caption: structuredContent?.caption, description: structuredContent?.description, truncate: structuredContent?.truncate, contentNode: structuredContent ? undefined : contentNode, disabled: disabled }), switchControl, expandIcon && (_jsx("div", { className: styles.expandCenteredWrapper, children: _jsx("span", { className: styles.groupIndicator, "data-open": open || undefined, "data-disabled": disabled || undefined, "data-interactive": expandIconInteractive || undefined, "data-test-id": TEST_IDS.groupIndicator, onClick: onExpandIconClick, "aria-hidden": true, children: expandIcon }) }))] })] }));
36
+ return (_jsxs("div", { className: cn(styles.itemWrapper, className), "data-selection-mode": selectionMode, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-checked": checked || undefined, "data-open": open || undefined, children: [!disabled && _jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": dataTestId, ref: itemRef, className: styles.listItem, onClick: onClick, onMouseDown: onMouseDown, tabIndex: tabIndex, "data-non-pointer": (inactive && !onClick) || undefined, "data-open": open || undefined, "aria-expanded": isParentNode ? Boolean(open) : undefined, onKeyDown: onKeyDown, onFocus: onFocus, style: { '--level': level, ...style }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": checked || undefined, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, children: [dragHandle, showMarker && _jsx("div", { className: styles.marker, "aria-hidden": true, "data-disabled": disabled || undefined }), showCheckbox && (_jsx("div", { className: styles.checkboxCenterWrapper, children: _jsx(Checkbox, { size: 'xs', disabled: disabled, checked: checked, tabIndex: -1 }) })), _jsx(ContentWrapperCustom, { layout: 'item', beforeContent: beforeContent, afterContent: afterContent, label: structuredContent?.label, caption: structuredContent?.caption, description: structuredContent?.description, truncate: structuredContent?.truncate, contentNode: structuredContent ? undefined : contentNode, disabled: disabled }), switchControl, expandIcon && (_jsx("div", { className: styles.expandCenteredWrapper, children: _jsx("span", { className: styles.groupIndicator, "data-open": open || undefined, "data-disabled": disabled || undefined, "data-interactive": expandIconInteractive || undefined, "data-test-id": TEST_IDS.groupIndicator, onClick: onExpandIconClick, "aria-hidden": true, children: expandIcon }) }))] })] }));
37
37
  }
package/dist/esm/components/ListCustom/helperComponents/ListItemCustom/styles.module.css CHANGED
@@ -69,11 +69,10 @@
69
69
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
70
70
  }
71
71
 
72
- .checkbox{
72
+ .checkboxCenterWrapper{
73
73
  display:flex;
74
- flex-shrink:0;
75
74
  align-items:flex-start;
76
- padding:var(--sn-primitive-dimension-4, 4px);
75
+ padding:var(--sn-primitive-dimension-8, 8px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
77
76
  }
78
77
 
79
78
  .expandCenteredWrapper{
package/dist/esm/components/UserMenu/hooks/useProfileItem.js CHANGED
@@ -1,17 +1,14 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Avatar } from '@cloud-ru/ds-avatar';
3
3
  import { SettingsSVG } from '@cloud-ru/ds-icons/interface/system';
4
+ import { TruncateString } from '@cloud-ru/ds-truncate-string';
4
5
  import { useMemo } from 'react';
5
6
  import styles from '../styles.module.css';
6
7
  export function useProfileItem({ fullName = '', email = '', itemWrapRender, onClick, }) {
7
8
  return useMemo(() => ({
8
- content: {
9
- label: fullName,
10
- description: email,
11
- truncate: {
12
- description: 1,
13
- },
14
- },
9
+ // ReactNode: иначе ContentWrapperCustom сам рисует label с `regular-body-s`,
10
+ // а `className` айтема на `.label` не действует.
11
+ content: (_jsxs("div", { className: styles.userItemContent, children: [_jsx("div", { className: styles.userItemHeadline, children: _jsx(TruncateString, { className: styles.userItemLabel, text: fullName, maxLines: 1 }) }), email ? _jsx(TruncateString, { className: styles.userItemDescription, text: email, maxLines: 1 }) : null] })),
15
12
  onClick,
16
13
  beforeContent: _jsx(Avatar, { appearance: 'red', size: 's', name: fullName, showTwoSymbols: true }),
17
14
  afterContent: _jsx(SettingsSVG, { className: styles.profileSettingsIcon }),
package/dist/esm/components/UserMenu/styles.module.css CHANGED
@@ -13,4 +13,48 @@
13
13
  .logoutItem span,
14
14
  .logoutItem svg{
15
15
  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
16
+ }
17
+
18
+ .userItemContent{
19
+ display:flex;
20
+ flex:1 0 0;
21
+ flex-direction:column;
22
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
23
+ align-items:flex-start;
24
+ justify-content:center;
25
+ min-width:0;
26
+ }
27
+
28
+ .userItemHeadline{
29
+ display:flex;
30
+ align-items:center;
31
+ align-self:stretch;
32
+ width:100%;
33
+ min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
34
+ }
35
+
36
+ .userItemLabel{
37
+ overflow:hidden;
38
+ min-width:0;
39
+ max-width:100%;
40
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
41
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
42
+ font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
43
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
44
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
45
+ letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
46
+ paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
47
+ }
48
+
49
+ .userItemDescription{
50
+ overflow:hidden;
51
+ min-width:0;
52
+ max-width:100%;
53
+ color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
54
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
55
+ font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
56
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
57
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
58
+ letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
59
+ paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
16
60
  }
package/dist/esm/style.css CHANGED
@@ -279,11 +279,10 @@
279
279
  background-color:var(--sn-theme-color-neutral-accent, var(--sn-brand-color-neutral-50, var(--sn-brand-palette-gray-50, #222222)));
280
280
  }
281
281
 
282
- .checkbox{
282
+ .checkboxCenterWrapper{
283
283
  display:flex;
284
- flex-shrink:0;
285
284
  align-items:flex-start;
286
- padding:var(--sn-primitive-dimension-4, 4px);
285
+ padding:var(--sn-primitive-dimension-8, 8px) 0 var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-4, 4px);
287
286
  }
288
287
 
289
288
  .expandCenteredWrapper{
@@ -1429,4 +1428,48 @@
1429
1428
  .logoutItem span,
1430
1429
  .logoutItem svg{
1431
1430
  color:var(--sn-theme-color-red-text, var(--sn-brand-palette-red-40, #a93533));
1431
+ }
1432
+
1433
+ .userItemContent{
1434
+ display:flex;
1435
+ flex:1 0 0;
1436
+ flex-direction:column;
1437
+ gap:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-gap, var(--sn-primitive-dimension-0, 0px));
1438
+ align-items:flex-start;
1439
+ justify-content:center;
1440
+ min-width:0;
1441
+ }
1442
+
1443
+ .userItemHeadline{
1444
+ display:flex;
1445
+ align-items:center;
1446
+ align-self:stretch;
1447
+ width:100%;
1448
+ min-height:var(--sn-list-anatomy-size-s-listItem-contentWrapper-textWrapper-textContent-headline-minHeight, var(--sn-primitive-font-lineHeight-16, 16px));
1449
+ }
1450
+
1451
+ .userItemLabel{
1452
+ overflow:hidden;
1453
+ min-width:0;
1454
+ max-width:100%;
1455
+ color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #000000));
1456
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Text));
1457
+ font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-500, 500))));
1458
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
1459
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
1460
+ letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
1461
+ paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1462
+ }
1463
+
1464
+ .userItemDescription{
1465
+ overflow:hidden;
1466
+ min-width:0;
1467
+ max-width:100%;
1468
+ color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(0, 0, 0, 0.7803921569)));
1469
+ font-family:var(--sn-regular-body-s-fontFamily, var(--sn-brand-font-fontFamily-regular-body, SB Sans Text));
1470
+ font-weight:var(--sn-regular-body-s-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-s, var(--sn-brand-font-fontWeight-light-regular-body-s, var(--sn-primitive-font-fontWeightValue-400, 400))));
1471
+ line-height:var(--sn-regular-body-s-lineHeight, var(--sn-density-typography-roleBody-lineHeightS, var(--sn-platform-comfort-typography-roleBody-lineHeightS, var(--sn-primitive-font-lineHeight-20, 20px))));
1472
+ font-size:var(--sn-regular-body-s-fontSize, var(--sn-density-typography-roleBody-fontSizeS, var(--sn-platform-comfort-typography-roleBody-fontSizeS, var(--sn-primitive-font-fontSize-14, 14px))));
1473
+ letter-spacing:var(--sn-regular-body-s-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
1474
+ paragraph-spacing:var(--sn-regular-body-s-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
1432
1475
  }