@cloud-ru/ds-uikit-product-header 2.1.8-preview-85aaafa9.0 → 2.1.8-preview-cb48d4cb.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.
@@ -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
  }
@@ -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{
@@ -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{
@@ -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
  }
@@ -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{
@@ -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{