Skip to content

Commit cbb02ce

Browse files
kubit-uikubit-ui
authored
Merge pull request #22 from kubit-ui/feature/improvements
Feature/improvements
2 parents 90d68c4 + c75bc70 commit cbb02ce

File tree

134 files changed

+3729
-1591
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

134 files changed

+3729
-1591
lines changed

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@kubit-ui-web/react-components",
3-
"version": "1.8.1",
3+
"version": "1.8.2",
44
"description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
55
"author": {
66
"name": "Kubit",
@@ -82,8 +82,8 @@
8282
"sideEffects": false,
8383
"license": "Apache-2.0",
8484
"devDependencies": {
85-
"@babel/core": "^7.24.9",
86-
"@babel/preset-env": "^7.25.0",
85+
"@babel/core": "^7.25.2",
86+
"@babel/preset-env": "^7.25.2",
8787
"@babel/preset-react": "^7.24.7",
8888
"@babel/preset-typescript": "^7.24.7",
8989
"@eslint/compat": "^1.1.1",
@@ -111,8 +111,8 @@
111111
"@types/react-dom": "^18.3.0",
112112
"@types/styled-components": "^5.1.34",
113113
"@types/ungap__structured-clone": "^1.2.0",
114-
"@typescript-eslint/eslint-plugin": "^7.17.0",
115-
"@typescript-eslint/parser": "^7.17.0",
114+
"@typescript-eslint/eslint-plugin": "^7.18.0",
115+
"@typescript-eslint/parser": "^7.18.0",
116116
"@ungap/structured-clone": "^1.2.0",
117117
"@vitejs/plugin-react": "^4.3.1",
118118
"babel-jest": "^29.7.0",

‎src/components/checkboxWithLabel/checkboxWithLabelControlled.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,9 @@ const CheckboxWithLabelBoundary = <V extends string | unknown>(
5757
</ErrorBoundary>
5858
);
5959

60+
/**
61+
* @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the CheckBox component
62+
*/
6063
const CheckboxWithLabelControlled = React.forwardRef(CheckboxWithLabelBoundary) as <
6164
V extends string | unknown,
6265
>(

‎src/components/checkboxWithLabel/checkboxWithLabelUncontrolled.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@ const CheckboxWithLabelUncontrolledComponent = <V extends string | unknown>(
2222
);
2323
};
2424

25+
/**
26+
* @deprecated This component has been deprecated and will be removed in the next MAJOR release. Will include all this on the CheckBox component
27+
*/
2528
const CheckboxWithLabelUncontrolled = React.forwardRef(CheckboxWithLabelUncontrolledComponent) as <
2629
V extends string | unknown,
2730
>(

‎src/components/confirmationMessage/confirmationMessage.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ const ConfirmationMessageBoundary = <V extends string | unknown>(
5252
</ErrorBoundary>
5353
);
5454

55+
/**
56+
* @deprecated This component has been deprecated and will be removed in the next MAJOR release.
57+
*/
5558
const ConfirmationMessage = React.forwardRef(ConfirmationMessageBoundary) as <
5659
V extends string | unknown,
5760
>(

‎src/components/cssAnimation/cssAnimation.tsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -107,7 +107,8 @@ const CssAnimationComponent = (
107107
};
108108

109109
/**
110-
* @description
110+
* @deprecated This component has been deprecated and will be removed in the next MAJOR release.
111+
*
111112
* CssAnimation component is a wrapper component that can be used to wrap other components.
112113
*
113114
* @param {React.PropsWithChildren<ICssAnimation>} props

‎src/components/dataTable/__tests__/hooks/useDataTableStickyDividers.test.ts

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
3+
import { useDataTableStickyDividers } from '../../hooks/useDataTableStickyDividers';
4+
5+
describe('useDataTableStickyDividers', () => {
6+
let wrapper: HTMLDivElement;
7+
let scrollableContainer: HTMLDivElement;
8+
let divider: HTMLDivElement;
9+
let table: HTMLTableElement;
10+
let tableHead: HTMLTableSectionElement;
11+
let tableRow: HTMLTableRowElement;
12+
let tableCell: HTMLTableCellElement;
13+
let leftBoxShadowContainer: HTMLDivElement;
14+
let ref: React.RefObject<HTMLDivElement>;
15+
16+
beforeAll(() => {
17+
global.ResizeObserver = class ResizeObserver {
18+
callback;
19+
constructor(callback) {
20+
this.callback = callback;
21+
}
22+
observe() {
23+
// Call the callback
24+
this.callback();
25+
}
26+
unobserve() {
27+
// do nothing
28+
}
29+
disconnect() {
30+
// do nothing
31+
}
32+
};
33+
});
34+
35+
beforeEach(() => {
36+
wrapper = document.createElement('div');
37+
scrollableContainer = document.createElement('div');
38+
scrollableContainer.setAttribute('data-datatable-scrollable-container', '');
39+
scrollableContainer.scroll = jest.fn().mockImplementation((x, y) => {
40+
scrollableContainer.scrollTop = y;
41+
scrollableContainer.scrollLeft = x;
42+
scrollableContainer.dispatchEvent(new Event('scroll'));
43+
});
44+
divider = document.createElement('div');
45+
divider.setAttribute('data-table-divider', '');
46+
table = document.createElement('table');
47+
tableHead = document.createElement('thead');
48+
tableHead.setAttribute('data-table-head', '');
49+
tableRow = document.createElement('tr');
50+
tableRow.setAttribute('data-table-row', '');
51+
tableCell = document.createElement('td');
52+
tableCell.setAttribute('data-sticky', 'right');
53+
leftBoxShadowContainer = document.createElement('div');
54+
leftBoxShadowContainer.setAttribute('data-datatable-left-shadow', '');
55+
56+
tableRow.appendChild(tableCell);
57+
tableHead.appendChild(tableRow);
58+
table.appendChild(tableHead);
59+
scrollableContainer.appendChild(table);
60+
scrollableContainer.appendChild(divider);
61+
wrapper.appendChild(scrollableContainer);
62+
wrapper.appendChild(leftBoxShadowContainer);
63+
document.body.appendChild(wrapper);
64+
ref = { current: wrapper };
65+
});
66+
67+
afterEach(() => {
68+
document.body.removeChild(wrapper);
69+
});
70+
71+
it('When the right position of the sticky columns have been set and there is horizontal scroll, the dividers width is set to the max width of the sticky columns', () => {
72+
// Simulate horizontal scroll
73+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
74+
value: 200,
75+
});
76+
Object.defineProperty(scrollableContainer, 'clientWidth', {
77+
value: 100,
78+
});
79+
// Simulate offset width for the table row
80+
Object.defineProperty(tableRow, 'offsetWidth', {
81+
value: 200,
82+
});
83+
renderHook(() => useDataTableStickyDividers({ ref }));
84+
expect(divider.style.width).toBe('200px');
85+
});
86+
87+
it('When there are left sticky columns and there is horizontal scroll, the dividers position is set to sticky', () => {
88+
tableCell.setAttribute('data-sticky', 'left');
89+
// Simulate horizontal scroll
90+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
91+
value: 200,
92+
});
93+
Object.defineProperty(scrollableContainer, 'clientWidth', {
94+
value: 100,
95+
});
96+
// Simulate offset width for the table row
97+
Object.defineProperty(tableRow, 'offsetWidth', {
98+
value: 200,
99+
});
100+
renderHook(() => useDataTableStickyDividers({ ref }));
101+
expect(divider.style.position).toBe('sticky');
102+
});
103+
104+
it('When there are left sticky columns and there is horizontal scroll, the dividers z-index should be greather than the shadow z-index', () => {
105+
tableCell.setAttribute('data-sticky', 'left');
106+
leftBoxShadowContainer.style.zIndex = '2';
107+
// Simulate horizontal scroll
108+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
109+
value: 200,
110+
});
111+
Object.defineProperty(scrollableContainer, 'clientWidth', {
112+
value: 100,
113+
});
114+
// Simulate offset width for the table row
115+
Object.defineProperty(tableRow, 'offsetWidth', {
116+
value: 200,
117+
});
118+
renderHook(() => useDataTableStickyDividers({ ref }));
119+
expect(divider.style.zIndex).toBe('3');
120+
});
121+
122+
it('When the right position of the sticky columns have been set and there is no horizontal scroll, the dividers width is unset', () => {
123+
// Simulate offset width for the table row
124+
Object.defineProperty(tableRow, 'offsetWidth', {
125+
value: 200,
126+
});
127+
renderHook(() => useDataTableStickyDividers({ ref }));
128+
expect(divider.style.width).toBe('');
129+
});
130+
131+
it('When there are left sticky columns and there is no horizontal scroll, the dividers position is unset', () => {
132+
tableCell.setAttribute('data-sticky', 'left');
133+
// Simulate offset width for the table row
134+
Object.defineProperty(tableRow, 'offsetWidth', {
135+
value: 200,
136+
});
137+
renderHook(() => useDataTableStickyDividers({ ref }));
138+
expect(divider.style.position).toBe('');
139+
});
140+
});

‎src/components/dataTable/__tests__/hooks/useDataTableStickyLeftColumns.test.ts

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
import { renderHook } from '@testing-library/react-hooks';
2+
3+
import { useDataTableStickyLeftColumns } from '../../hooks/useDataTableStickyLeftColumns';
4+
5+
describe('useDataTableStickyLeftColumns', () => {
6+
let wrapper: HTMLDivElement;
7+
let scrollableContainer: HTMLDivElement;
8+
let divider: HTMLDivElement;
9+
let table: HTMLTableElement;
10+
let tableHead: HTMLTableSectionElement;
11+
let tableRow: HTMLTableRowElement;
12+
let tableCell: HTMLTableCellElement;
13+
let leftBoxShadowContainer: HTMLDivElement;
14+
let ref: React.RefObject<HTMLDivElement>;
15+
16+
beforeAll(() => {
17+
global.ResizeObserver = class ResizeObserver {
18+
callback;
19+
constructor(callback) {
20+
this.callback = callback;
21+
}
22+
observe() {
23+
// Call the callback
24+
this.callback();
25+
}
26+
unobserve() {
27+
// do nothing
28+
}
29+
disconnect() {
30+
// do nothing
31+
}
32+
};
33+
});
34+
35+
beforeEach(() => {
36+
wrapper = document.createElement('div');
37+
scrollableContainer = document.createElement('div');
38+
scrollableContainer.setAttribute('data-datatable-scrollable-container', '');
39+
scrollableContainer.scroll = jest.fn().mockImplementation((x, y) => {
40+
scrollableContainer.scrollTop = y;
41+
scrollableContainer.scrollLeft = x;
42+
scrollableContainer.dispatchEvent(new Event('scroll'));
43+
});
44+
divider = document.createElement('div');
45+
divider.setAttribute('data-table-divider', '');
46+
table = document.createElement('table');
47+
tableHead = document.createElement('thead');
48+
tableHead.setAttribute('data-table-head', '');
49+
tableRow = document.createElement('tr');
50+
tableRow.setAttribute('data-table-row', '');
51+
tableCell = document.createElement('td');
52+
tableCell.setAttribute('data-sticky', 'left');
53+
leftBoxShadowContainer = document.createElement('div');
54+
leftBoxShadowContainer.setAttribute('data-datatable-left-shadow', '');
55+
56+
tableRow.appendChild(tableCell);
57+
tableHead.appendChild(tableRow);
58+
table.appendChild(tableHead);
59+
scrollableContainer.appendChild(table);
60+
scrollableContainer.appendChild(divider);
61+
wrapper.appendChild(scrollableContainer);
62+
wrapper.appendChild(leftBoxShadowContainer);
63+
document.body.appendChild(wrapper);
64+
ref = { current: wrapper };
65+
});
66+
67+
afterEach(() => {
68+
document.body.removeChild(wrapper);
69+
});
70+
71+
it('should do nothing when there is not scrollable container', () => {
72+
const wrapperWithoutScrollableContainer = { current: document.createElement('div') };
73+
renderHook(() => useDataTableStickyLeftColumns({ ref: wrapperWithoutScrollableContainer }));
74+
expect(tableCell.style.left).toBe('');
75+
});
76+
77+
it('When there is horizontal scroll, left style for sticky columns should be set', () => {
78+
// Simulate horizontal scroll
79+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
80+
value: 200,
81+
});
82+
Object.defineProperty(scrollableContainer, 'clientWidth', {
83+
value: 100,
84+
});
85+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
86+
expect(tableCell.style.left).toBe('0px');
87+
});
88+
89+
it('When there is not horizontal scroll, left style for sticky columns should not be set', () => {
90+
// Simulate not horizontal scroll
91+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
92+
value: 100,
93+
});
94+
Object.defineProperty(scrollableContainer, 'clientWidth', {
95+
value: 200,
96+
});
97+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
98+
expect(tableCell.style.left).toBe('');
99+
});
100+
101+
it('When the left position of the sticky columns have been set, the leftBoxShadowContainer right position is set', () => {
102+
// Simulate horizontal scroll
103+
Object.defineProperty(scrollableContainer, 'scrollWidth', {
104+
value: 200,
105+
});
106+
Object.defineProperty(scrollableContainer, 'clientWidth', {
107+
value: 100,
108+
});
109+
// Define table cell width
110+
Object.defineProperty(tableCell, 'offsetWidth', {
111+
value: 20,
112+
});
113+
renderHook(() => useDataTableStickyLeftColumns({ ref }));
114+
expect(leftBoxShadowContainer.style.left).toBe('20px');
115+
});
116+
});

0 commit comments

Comments
 (0)