@cloud-ru/ds-list 1.1.4 → 2.0.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/CHANGELOG.md +6 -0
  2. package/dist/cjs/components/Items/AccordionItem/AccordionItem.js +3 -9
  3. package/dist/cjs/components/Items/BaseItem/BaseItem.d.ts +6 -6
  4. package/dist/cjs/components/Items/BaseItem/BaseItem.js +22 -21
  5. package/dist/cjs/components/Items/BaseItem/styles.module.css +4 -60
  6. package/dist/cjs/components/Items/NextListItem/NextListItem.js +1 -1
  7. package/dist/cjs/style.css +4 -60
  8. package/dist/esm/components/Items/AccordionItem/AccordionItem.js +3 -9
  9. package/dist/esm/components/Items/BaseItem/BaseItem.d.ts +6 -6
  10. package/dist/esm/components/Items/BaseItem/BaseItem.js +22 -21
  11. package/dist/esm/components/Items/BaseItem/styles.module.css +4 -60
  12. package/dist/esm/components/Items/NextListItem/NextListItem.js +1 -1
  13. package/dist/esm/style.css +4 -60
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +5 -5
  17. package/src/components/Items/AccordionItem/AccordionItem.tsx +4 -11
  18. package/src/components/Items/BaseItem/BaseItem.tsx +33 -45
  19. package/src/components/Items/BaseItem/styles.module.scss +11 -68
  20. package/src/components/Items/NextListItem/NextListItem.tsx +1 -1
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -56,62 +56,22 @@
56
56
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
57
57
  }
58
58
 
59
- .expandableIcon{
60
- display:flex;
61
- align-items:center;
62
- color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
63
- fill:currentcolor;
64
- }
65
-
66
59
  .groupIndicator{
67
- cursor:pointer;
68
- position:relative;
60
+ pointer-events:none;
69
61
  display:flex;
70
62
  flex-shrink:0;
71
63
  align-items:center;
72
64
  justify-content:center;
73
- padding:0;
74
- border:none;
75
- border-radius:var(--sn-primitive-dimension-8, 8px);
76
65
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
77
- -webkit-appearance:none;
78
- -moz-appearance:none;
79
- appearance:none;
80
- background:transparent;
81
- outline:none;
66
+ fill:currentcolor;
82
67
  }
83
68
  .groupIndicator svg{
84
- position:relative;
85
- z-index:1;
86
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
87
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
88
- }
89
- .groupIndicator:focus-visible{
90
- outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
91
- outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
69
+ width:100%;
70
+ height:100%;
92
71
  }
93
72
  .groupIndicator[data-open]{
94
73
  border-radius:var(--sn-primitive-dimension-2, 2px);
95
74
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
96
- }
97
-
98
- .groupIndicatorState{
99
- pointer-events:none;
100
- position:absolute;
101
- inset:0;
102
- border-radius:inherit;
103
- background:transparent;
104
- }
105
-
106
- .groupIndicator:hover > .groupIndicatorState{
107
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
108
- }
109
-
110
- .groupIndicator:active > .groupIndicatorState{
111
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
112
- }
113
-
114
- .groupIndicator[data-open] > .groupIndicatorState{
115
75
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
116
76
  }
117
77
 
@@ -157,10 +117,6 @@
157
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
158
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
159
119
  }
160
- .droplistItem[data-size=s] .expandableIcon{
161
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
162
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
163
- }
164
120
  .droplistItem[data-size=s] .groupIndicator{
165
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
166
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -204,10 +160,6 @@
204
160
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
205
161
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
206
162
  }
207
- .droplistItem[data-size=m] .expandableIcon{
208
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
209
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
210
- }
211
163
  .droplistItem[data-size=m] .groupIndicator{
212
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
213
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -251,10 +203,6 @@
251
203
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
252
204
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
253
205
  }
254
- .droplistItem[data-size=l] .expandableIcon{
255
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
256
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
257
- }
258
206
  .droplistItem[data-size=l] .groupIndicator{
259
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
260
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -280,11 +228,7 @@
280
228
  cursor:inherit;
281
229
  }
282
230
 
283
- .innerWrapper[data-disabled] .expandableIcon{
284
- color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
285
- }
286
231
  .innerWrapper[data-disabled] .groupIndicator{
287
- cursor:not-allowed;
288
232
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
289
233
  }
290
234
  .innerWrapper[data-disabled] .beforeContent,
package/dist/esm/components/Items/NextListItem/NextListItem.js CHANGED
@@ -64,5 +64,5 @@ export function NextListItem({ items, placement = 'right-start', id, scroll, scr
64
64
  }, scrollRef: scrollRef, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars, loading: loading, dataError: dataError, dataFiltered: dataFiltered }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
65
65
  setOpen(value);
66
66
  onSublistOpenChanged?.(value, id);
67
- }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, { ...option, disabled: disabled, open: isOpen || open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: openSublist, onExpandIconClick: openSublist, onSelect: handleOnSelect }) }));
67
+ }, placement: placement, widthStrategy: 'auto', children: _jsx(BaseItem, { ...option, disabled: disabled, open: isOpen || open, expandIcon: _jsx(ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: openSublist, onToggleExpand: openSublist, onSelect: handleOnSelect }) }));
68
68
  }
package/dist/esm/style.css CHANGED
@@ -56,62 +56,22 @@
56
56
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
57
57
  }
58
58
 
59
- .expandableIcon{
60
- display:flex;
61
- align-items:center;
62
- color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
63
- fill:currentcolor;
64
- }
65
-
66
59
  .groupIndicator{
67
- cursor:pointer;
68
- position:relative;
60
+ pointer-events:none;
69
61
  display:flex;
70
62
  flex-shrink:0;
71
63
  align-items:center;
72
64
  justify-content:center;
73
- padding:0;
74
- border:none;
75
- border-radius:var(--sn-primitive-dimension-8, 8px);
76
65
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
77
- -webkit-appearance:none;
78
- -moz-appearance:none;
79
- appearance:none;
80
- background:transparent;
81
- outline:none;
66
+ fill:currentcolor;
82
67
  }
83
68
  .groupIndicator svg{
84
- position:relative;
85
- z-index:1;
86
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
87
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
88
- }
89
- .groupIndicator:focus-visible{
90
- outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
91
- outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
69
+ width:100%;
70
+ height:100%;
92
71
  }
93
72
  .groupIndicator[data-open]{
94
73
  border-radius:var(--sn-primitive-dimension-2, 2px);
95
74
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
96
- }
97
-
98
- .groupIndicatorState{
99
- pointer-events:none;
100
- position:absolute;
101
- inset:0;
102
- border-radius:inherit;
103
- background:transparent;
104
- }
105
-
106
- .groupIndicator:hover > .groupIndicatorState{
107
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
108
- }
109
-
110
- .groupIndicator:active > .groupIndicatorState{
111
- background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
112
- }
113
-
114
- .groupIndicator[data-open] > .groupIndicatorState{
115
75
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
116
76
  }
117
77
 
@@ -157,10 +117,6 @@
157
117
  padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
158
118
  padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
159
119
  }
160
- .droplistItem[data-size=s] .expandableIcon{
161
- width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
162
- height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
163
- }
164
120
  .droplistItem[data-size=s] .groupIndicator{
165
121
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
166
122
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -204,10 +160,6 @@
204
160
  padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
205
161
  padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
206
162
  }
207
- .droplistItem[data-size=m] .expandableIcon{
208
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
209
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
210
- }
211
163
  .droplistItem[data-size=m] .groupIndicator{
212
164
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
213
165
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -251,10 +203,6 @@
251
203
  padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
252
204
  padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
253
205
  }
254
- .droplistItem[data-size=l] .expandableIcon{
255
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
256
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
257
- }
258
206
  .droplistItem[data-size=l] .groupIndicator{
259
207
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
260
208
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -280,11 +228,7 @@
280
228
  cursor:inherit;
281
229
  }
282
230
 
283
- .innerWrapper[data-disabled] .expandableIcon{
284
- color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
285
- }
286
231
  .innerWrapper[data-disabled] .groupIndicator{
287
- cursor:not-allowed;
288
232
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
289
233
  }
290
234
  .innerWrapper[data-disabled] .beforeContent,