@cloud-ru/ds-list 1.1.4-preview-5ffe9ec9.0 → 1.1.4

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 +4 -0
  2. package/dist/cjs/components/Items/AccordionItem/AccordionItem.js +9 -3
  3. package/dist/cjs/components/Items/BaseItem/BaseItem.d.ts +6 -6
  4. package/dist/cjs/components/Items/BaseItem/BaseItem.js +21 -22
  5. package/dist/cjs/components/Items/BaseItem/styles.module.css +60 -4
  6. package/dist/cjs/components/Items/NextListItem/NextListItem.js +1 -1
  7. package/dist/cjs/style.css +60 -4
  8. package/dist/esm/components/Items/AccordionItem/AccordionItem.js +9 -3
  9. package/dist/esm/components/Items/BaseItem/BaseItem.d.ts +6 -6
  10. package/dist/esm/components/Items/BaseItem/BaseItem.js +21 -22
  11. package/dist/esm/components/Items/BaseItem/styles.module.css +60 -4
  12. package/dist/esm/components/Items/NextListItem/NextListItem.js +1 -1
  13. package/dist/esm/style.css +60 -4
  14. package/dist/tsconfig.cjs.tsbuildinfo +1 -1
  15. package/dist/tsconfig.esm.tsbuildinfo +1 -1
  16. package/package.json +18 -18
  17. package/src/components/Items/AccordionItem/AccordionItem.tsx +11 -4
  18. package/src/components/Items/BaseItem/BaseItem.tsx +45 -33
  19. package/src/components/Items/BaseItem/styles.module.scss +68 -11
  20. package/src/components/Items/NextListItem/NextListItem.tsx +1 -1
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -56,22 +56,62 @@
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
+
59
66
  .groupIndicator{
60
- pointer-events:none;
67
+ cursor:pointer;
68
+ position:relative;
61
69
  display:flex;
62
70
  flex-shrink:0;
63
71
  align-items:center;
64
72
  justify-content:center;
73
+ padding:0;
74
+ border:none;
75
+ border-radius:var(--sn-primitive-dimension-8, 8px);
65
76
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
66
- fill:currentcolor;
77
+ -webkit-appearance:none;
78
+ -moz-appearance:none;
79
+ appearance:none;
80
+ background:transparent;
81
+ outline:none;
67
82
  }
68
83
  .groupIndicator svg{
69
- width:100%;
70
- height:100%;
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));
71
92
  }
72
93
  .groupIndicator[data-open]{
73
94
  border-radius:var(--sn-primitive-dimension-2, 2px);
74
95
  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{
75
115
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
76
116
  }
77
117
 
@@ -117,6 +157,10 @@
117
157
  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)));
118
158
  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)));
119
159
  }
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
+ }
120
164
  .droplistItem[data-size=s] .groupIndicator{
121
165
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
166
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +204,10 @@
160
204
  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)));
161
205
  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)));
162
206
  }
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
+ }
163
211
  .droplistItem[data-size=m] .groupIndicator{
164
212
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
213
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +251,10 @@
203
251
  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)));
204
252
  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)));
205
253
  }
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
+ }
206
258
  .droplistItem[data-size=l] .groupIndicator{
207
259
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
260
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -228,7 +280,11 @@
228
280
  cursor:inherit;
229
281
  }
230
282
 
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
+ }
231
286
  .innerWrapper[data-disabled] .groupIndicator{
287
+ cursor:not-allowed;
232
288
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
233
289
  }
234
290
  .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, onToggleExpand: 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, onExpandIconClick: openSublist, onSelect: handleOnSelect }) }));
68
68
  }
package/dist/esm/style.css CHANGED
@@ -56,22 +56,62 @@
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
+
59
66
  .groupIndicator{
60
- pointer-events:none;
67
+ cursor:pointer;
68
+ position:relative;
61
69
  display:flex;
62
70
  flex-shrink:0;
63
71
  align-items:center;
64
72
  justify-content:center;
73
+ padding:0;
74
+ border:none;
75
+ border-radius:var(--sn-primitive-dimension-8, 8px);
65
76
  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
66
- fill:currentcolor;
77
+ -webkit-appearance:none;
78
+ -moz-appearance:none;
79
+ appearance:none;
80
+ background:transparent;
81
+ outline:none;
67
82
  }
68
83
  .groupIndicator svg{
69
- width:100%;
70
- height:100%;
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));
71
92
  }
72
93
  .groupIndicator[data-open]{
73
94
  border-radius:var(--sn-primitive-dimension-2, 2px);
74
95
  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{
75
115
  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
76
116
  }
77
117
 
@@ -117,6 +157,10 @@
117
157
  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)));
118
158
  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)));
119
159
  }
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
+ }
120
164
  .droplistItem[data-size=s] .groupIndicator{
121
165
  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
122
166
  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -160,6 +204,10 @@
160
204
  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)));
161
205
  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)));
162
206
  }
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
+ }
163
211
  .droplistItem[data-size=m] .groupIndicator{
164
212
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
165
213
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -203,6 +251,10 @@
203
251
  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)));
204
252
  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)));
205
253
  }
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
+ }
206
258
  .droplistItem[data-size=l] .groupIndicator{
207
259
  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
208
260
  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -228,7 +280,11 @@
228
280
  cursor:inherit;
229
281
  }
230
282
 
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
+ }
231
286
  .innerWrapper[data-disabled] .groupIndicator{
287
+ cursor:not-allowed;
232
288
  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
233
289
  }
234
290
  .innerWrapper[data-disabled] .beforeContent,