Skip to content

Commit 6e29e46

Browse files
author
Ivan Runets
committed
feat(DataRowOptions): add reserveSpace property for checkbox configuration
- Introduced `reserveSpace` property to maintain consistent alignment for checkboxes in rows, - Updated related components and tests to accommodate the new property. - Enhanced performance and visual consistency for tree-like data structures. Fixes #2844
1 parent 25eae70 commit 6e29e46

13 files changed

Lines changed: 181 additions & 104 deletions

‎changelog.md‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,12 @@
88
* Menu arrow-key navigation now includes all roles starting with `menuitem` (e.g. `menuitem`, `menuitemradio`, `menuitemcheckbox`).
99
* [useVirtualList]: Added optional `virtualRowInfo` prop. When `height` is provided, skips `getBoundingClientRect` measurement; when `gap` is provided, uses it for vertical spacing between rows (flex/grid gap). Improves scroll performance on lists with uniform row sizing.
1010
* [FiltersPanel]: Added support `min`/`max`/`step` props at numeric filter config ([#3034](https://github.com/epam/UUI/issues/3034]))
11-
* [Promo]:
11+
* [Promo]:
1212
* [IconButton]: add '18' size ([#2943](https://github.com/epam/UUI/issues/2943]))
13+
* [DataRowOptions]: Added `reserveSpace` property to checkbox configuration
14+
- When set and `checkbox.isVisible` is `false`, reserves space for the checkbox in the row
15+
- Automatically calculated for tree-like data structures to maintain consistent alignment
16+
1317

1418
**What's Fixed**
1519
* [TimePicker]: fixed inconsistent time format between input field and dropdown - both now display hours and minutes with leading zeros (e.g., 01:00 AM) ([#2910](https://github.com/epam/UUI/issues/2910))
@@ -22,6 +26,7 @@
2226
* [DataTable]:
2327
* Table accepts `rawProps` for additional ARIA/HTML attributes (e.g. `aria-label` for table name); `role`, `aria-colcount`, and `aria-rowcount` remain controlled by the component. ([#2992](https://github.com/epam/UUI/issues/2992) Case 3)
2428
* Fixed Property Explorer by providing values for properties that are not automatically resolved ([#2832](https://github.com/epam/UUI/issues/2832))
29+
* Fixed tree table indentation when child rows have no checkbox: child rows now reserve consistent checkbox space for alignment ([#2844](https://github.com/epam/UUI/issues/2844))
2530
* [Tooltip]: fixed tooltip not showing on keyboard focus for complex elements with focusable children (e.g. Switch) ([#2959](https://github.com/epam/UUI/issues/2959))
2631

2732

‎uui-core/src/data/processing/views/__tests__/ArrayListView.row-options.test.ts‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -90,8 +90,8 @@ describe('ArrayListView - row options', () => {
9090
await waitFor(() => {
9191
const view = hookResult.result.current;
9292
expectViewToLookLike(view, [
93-
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
94-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
93+
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
94+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
9595
]);
9696
});
9797
});
@@ -167,8 +167,8 @@ describe('ArrayListView - row options', () => {
167167
await waitFor(() => {
168168
const view = hookResult.result.current;
169169
expectViewToLookLike(view, [
170-
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
171-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
170+
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
171+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
172172
]);
173173
});
174174

@@ -180,8 +180,9 @@ describe('ArrayListView - row options', () => {
180180
});
181181

182182
it('should selectAll be null, if selectAll = false', async () => {
183+
const checkbox = { isVisible: true, isDisabled: false };
183184
const dataSource = getArrayLocationsDS({
184-
rowOptions: { checkbox: { isVisible: true, isDisabled: false } },
185+
rowOptions: { checkbox },
185186
selectAll: false,
186187
});
187188

@@ -197,8 +198,8 @@ describe('ArrayListView - row options', () => {
197198
await waitFor(() => {
198199
const view = hookResult.result.current;
199200
expectViewToLookLike(view, [
200-
{ id: 'c-AF', parentId: undefined, isCheckable: true },
201-
{ id: 'c-EU', parentId: undefined, isCheckable: true },
201+
{ id: 'c-AF', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
202+
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
202203
]);
203204
});
204205

@@ -225,8 +226,8 @@ describe('ArrayListView - row options', () => {
225226
await waitFor(() => {
226227
const view = hookResult.result.current;
227228
expectViewToLookLike(view, [
228-
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
229-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
229+
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
230+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
230231
]);
231232
});
232233

@@ -247,7 +248,7 @@ describe('ArrayListView - row options', () => {
247248
await waitFor(() => {
248249
view = hookResult.result.current;
249250
expectViewToLookLike(view, [
250-
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
251+
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
251252
{ id: 'DZ', isChecked: false },
252253
{ id: 'BJ', isChecked: true },
253254
]);
@@ -273,8 +274,8 @@ describe('ArrayListView - row options', () => {
273274
await waitFor(() => {
274275
const view = hookResult.result.current;
275276
expectViewToLookLike(view, [
276-
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
277-
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
277+
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox: { ...checkbox, reserveSpace: true } },
278+
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
278279
]);
279280
});
280281

@@ -295,7 +296,7 @@ describe('ArrayListView - row options', () => {
295296
await waitFor(() => {
296297
view = hookResult.result.current;
297298
expectViewToLookLike(view, [
298-
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
299+
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox: { ...checkbox, reserveSpace: true } },
299300
{ id: 'DZ', isChecked: false },
300301
{ id: 'BJ', isChecked: true },
301302
]);
@@ -645,8 +646,8 @@ describe('ArrayListView - row options', () => {
645646
await waitFor(() => {
646647
const view = hookResult.result.current;
647648
expectViewToLookLike(view, [
648-
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
649-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
649+
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
650+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
650651
]);
651652
});
652653
});
@@ -722,8 +723,8 @@ describe('ArrayListView - row options', () => {
722723
await waitFor(() => {
723724
const view = hookResult.result.current;
724725
expectViewToLookLike(view, [
725-
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
726-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
726+
{ id: 'c-AF', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
727+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
727728
]);
728729
});
729730

@@ -735,8 +736,9 @@ describe('ArrayListView - row options', () => {
735736
});
736737

737738
it('should selectAll be null, if selectAll = false', async () => {
739+
const checkbox = { isVisible: true, isDisabled: false };
738740
const dataSource = getArrayLocationsDS({
739-
getRowOptions: () => ({ checkbox: { isVisible: true, isDisabled: false } }),
741+
getRowOptions: () => ({ checkbox }),
740742
selectAll: false,
741743
});
742744

@@ -752,8 +754,8 @@ describe('ArrayListView - row options', () => {
752754
await waitFor(() => {
753755
const view = hookResult.result.current;
754756
expectViewToLookLike(view, [
755-
{ id: 'c-AF', parentId: undefined, isCheckable: true },
756-
{ id: 'c-EU', parentId: undefined, isCheckable: true },
757+
{ id: 'c-AF', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
758+
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
757759
]);
758760
});
759761

@@ -780,8 +782,8 @@ describe('ArrayListView - row options', () => {
780782
await waitFor(() => {
781783
const view = hookResult.result.current;
782784
expectViewToLookLike(view, [
783-
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
784-
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox },
785+
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
786+
{ id: 'c-EU', parentId: undefined, isCheckable: false, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
785787
]);
786788
});
787789

@@ -802,7 +804,7 @@ describe('ArrayListView - row options', () => {
802804
await waitFor(() => {
803805
view = hookResult.result.current;
804806
expectViewToLookLike(view, [
805-
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox },
807+
{ id: 'c-AF', parentId: undefined, isCheckable: false, isChecked: false, isChildrenChecked: true, onCheck: undefined, checkbox: { ...checkbox, reserveSpace: true } },
806808
{ id: 'DZ', isChecked: false },
807809
{ id: 'BJ', isChecked: true },
808810
]);
@@ -828,8 +830,8 @@ describe('ArrayListView - row options', () => {
828830
await waitFor(() => {
829831
const view = hookResult.result.current;
830832
expectViewToLookLike(view, [
831-
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
832-
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox },
833+
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox: { ...checkbox, reserveSpace: true } },
834+
{ id: 'c-EU', parentId: undefined, isCheckable: true, checkbox: { ...checkbox, reserveSpace: true } },
833835
]);
834836
});
835837

@@ -850,7 +852,7 @@ describe('ArrayListView - row options', () => {
850852
await waitFor(() => {
851853
view = hookResult.result.current;
852854
expectViewToLookLike(view, [
853-
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox },
855+
{ id: 'c-AF', parentId: undefined, isCheckable: true, isChecked: false, isChildrenChecked: true, checkbox: { ...checkbox, reserveSpace: true } },
854856
{ id: 'DZ', isChecked: false },
855857
{ id: 'BJ', isChecked: true },
856858
]);

0 commit comments

Comments
 (0)