@deviceinsight/ng-ui-components 6.19.0-SNAPSHOT → 6.20.0

package/lib/cjs/components/pagination/__tests__/Pagination.spec.js

@@ -27,89 +27,89 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const enzyme_1 = require("enzyme");
+const vitest_1 = require("vitest");
 const Pagination_1 = __importDefault(require("../Pagination"));
-describe('Pagination.js', () => {
-    it('should disable all buttons when there is only one page', () => {
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 1, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.disabled')).toHaveLength(4);
+const react_1 = require("@testing-library/react");
+(0, vitest_1.describe)('Pagination.js', () => {
+    (0, vitest_1.it)('should disable all buttons when there is only one page', () => {
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 1, onChangePage: () => { } }));
+        (0, vitest_1.expect)(container.querySelectorAll('span.disabled')).toHaveLength(4);
     });
-    it('should disable "prev" and "first" when the first page is selected', () => {
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.prev.disabled')).toHaveLength(2);
+    (0, vitest_1.it)('should disable "prev" and "first" when the first page is selected', () => {
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        (0, vitest_1.expect)(container.querySelectorAll('span.prev.disabled')).toHaveLength(2);
     });
-    it('should disable "next" and "last" when the last page is selected', () => {
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.next.disabled')).toHaveLength(2);
+    (0, vitest_1.it)('should disable "next" and "last" when the last page is selected', () => {
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        (0, vitest_1.expect)(container.querySelectorAll('span.next.disabled')).toHaveLength(2);
     });
-    it('should not disable buttons when on a page > 0 and < max pages', () => {
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.disabled')).toHaveLength(0);
+    (0, vitest_1.it)('should not disable buttons when on a page > 0 and < max pages', () => {
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        (0, vitest_1.expect)(container.querySelectorAll('span.disabled')).toHaveLength(0);
     });
-    it('should go to the first page when the user clicks "first"', () => {
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.prev').first().simulate('click');
-        expect(handleChangePage).toHaveBeenCalledWith(0);
+    (0, vitest_1.it)('should go to the first page when the user clicks "first"', () => {
+        const handleChangePage = vitest_1.vi.fn();
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        react_1.fireEvent.click(container.querySelectorAll('span.prev')[0]);
+        (0, vitest_1.expect)(handleChangePage).toHaveBeenCalledWith(0);
     });
-    it('should go to the previous page when the user clicks "prev"', () => {
+    (0, vitest_1.it)('should go to the previous page when the user clicks "prev"', async () => {
         const page = 2;
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: page, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.prev').last().simulate('click');
-        expect(handleChangePage).toHaveBeenCalledWith(page - 1);
+        const handleChangePage = vitest_1.vi.fn();
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: page, totalPages: 10, onChangePage: handleChangePage }));
+        react_1.fireEvent.click(container.querySelectorAll('span.prev')[1]);
+        (0, vitest_1.expect)(handleChangePage).toHaveBeenCalledWith(page - 1);
     });
-    it('should go to the next page when the user clicks "next"', () => {
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.next').first().simulate('click');
-        expect(handleChangePage).toHaveBeenCalledWith(3);
+    (0, vitest_1.it)('should go to the next page when the user clicks "next"', () => {
+        const handleChangePage = vitest_1.vi.fn();
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
+        react_1.fireEvent.click(container.querySelectorAll('span.next')[0]);
+        (0, vitest_1.expect)(handleChangePage).toHaveBeenCalledWith(3);
     });
-    it('should go to the last page when the user clicks "last"', () => {
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.next').last().simulate('click');
-        expect(handleChangePage).toHaveBeenCalledWith(9);
+    (0, vitest_1.it)('should go to the last page when the user clicks "last"', () => {
+        const handleChangePage = vitest_1.vi.fn();
+        const { container } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        react_1.fireEvent.click(container.querySelectorAll('span.next')[1]);
+        (0, vitest_1.expect)(handleChangePage).toHaveBeenCalledWith(9);
     });
-    it('should match snapshot', () => {
-        const PaginationWrapper1 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
-        const PaginationWrapper2 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
-        const PaginationWrapper3 = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper1).toMatchSnapshot();
-        expect(PaginationWrapper2).toMatchSnapshot();
-        expect(PaginationWrapper3).toMatchSnapshot();
+    (0, vitest_1.it)('should match snapshot', () => {
+        const PaginationWrapper1 = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper2 = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper3 = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        (0, vitest_1.expect)(PaginationWrapper1).toMatchSnapshot();
+        (0, vitest_1.expect)(PaginationWrapper2).toMatchSnapshot();
+        (0, vitest_1.expect)(PaginationWrapper3).toMatchSnapshot();
     });
-    describe('handlePageInputChange', () => {
-        it('should set page number if input is a correct number', () => {
-            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
-            const instance = PaginationWrapper.instance();
-            // @ts-ignore
-            const spy = jest.spyOn(instance, 'notifyPageChange');
-            // @ts-ignore
-            instance.handlePageInputChange({ target: { value: '4' } });
-            expect(spy).toHaveBeenCalledWith(4 - 1); // counting from 0
+    (0, vitest_1.describe)('handlePageInputChange', () => {
+        (0, vitest_1.it)('should set page number if input is a correct number', async () => {
+            const handleChangePage = vitest_1.vi.fn();
+            const { getByRole } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            react_1.fireEvent.change(input, { target: { value: '4' } });
+            react_1.fireEvent.blur(input);
+            await (0, react_1.waitFor)(() => {
+                (0, vitest_1.expect)(handleChangePage).toHaveBeenCalledWith(3);
+            });
         });
-        it('should not set page number if input is bigger than totalPages', () => {
-            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
-            const instance = PaginationWrapper.instance();
-            // @ts-ignore
-            const spy = jest.spyOn(instance, 'notifyPageChange');
-            // @ts-ignore
-            instance.handlePageInputChange({ target: { value: '12' } });
-            expect(PaginationWrapper.state('page')).toBe(0);
-            expect(spy).not.toHaveBeenCalled();
+        (0, vitest_1.it)('should not set page number if input is bigger than totalPages', async () => {
+            const handleChangePage = vitest_1.vi.fn();
+            const { getByRole } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            react_1.fireEvent.change(input, { target: { value: '12' } });
+            react_1.fireEvent.blur(input);
+            await (0, react_1.waitFor)(() => {
+                (0, vitest_1.expect)(handleChangePage).not.toHaveBeenCalled();
+            });
         });
-        it('should not set empty string as state and not call notifyPageChange', () => {
-            const PaginationWrapper = (0, enzyme_1.shallow)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: () => { } }));
-            const instance = PaginationWrapper.instance();
-            // @ts-ignore
-            instance.handlePageInputChange({ target: { value: '2' } });
-            // @ts-ignore
-            const spy = jest.spyOn(instance, 'notifyPageChange');
-            // @ts-ignore
-            instance.handlePageInputChange({ target: { value: '0' } });
-            expect(PaginationWrapper.state('page')).toBe('');
-            expect(spy).not.toHaveBeenCalled();
+        (0, vitest_1.it)('should not set an empty string as page state', async () => {
+            const handleChangePage = vitest_1.vi.fn();
+            const { getByRole } = (0, react_1.render)(React.createElement(Pagination_1.default, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            react_1.fireEvent.change(input, { target: { value: '' } });
+            react_1.fireEvent.blur(input);
+            await (0, react_1.waitFor)(() => {
+                (0, vitest_1.expect)(handleChangePage).not.toHaveBeenCalled();
+            });
         });
     });
 });

package/lib/cjs/components/periodpicker/PeriodPicker.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Period } from './types';
 export declare type Props = {
     /** Period from start- to endpoint */
@@ -19,5 +19,5 @@ export declare type Props = {
     timezone?: string;
     'data-testid'?: string;
 };
-export default function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }: Props): JSX.Element;
+export default function PeriodPicker({ period, onChange, inputsHiddenByDefault, menuHidden, readOnly, locale, defaultPeriodName, timezone, ...props }: Props): React.JSX.Element;
 //# sourceMappingURL=PeriodPicker.d.ts.map

package/lib/cjs/components/periodpicker/PeriodPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PeriodPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/PeriodPicker.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,4DAA4D;IAC5D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,eAmBP"}
+{"version":3,"file":"PeriodPicker.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/PeriodPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAK/B,oBAAY,KAAK,GAAG;IACnB,qCAAqC;IACrC,MAAM,EAAE,MAAM,CAAC;IAEf,mCAAmC;IACnC,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAEnC,6BAA6B;IAC7B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B,4DAA4D;IAC5D,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,iCAAiC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EACpC,MAAM,EACN,QAAQ,EACR,qBAAqB,EACrB,UAAU,EACV,QAAQ,EACR,MAAM,EACN,iBAAiB,EACjB,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,qBAmBP"}

package/lib/cjs/components/periodpicker/components/Inputs.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Period } from '../types';
 declare type Props = {
     period: Period;
@@ -7,6 +7,6 @@ declare type Props = {
     locale?: string;
     timezone?: string;
 };
-export default function Inputs({ period, onChange, readOnly, locale, timezone }: Props): JSX.Element;
+export default function Inputs({ period, onChange, readOnly, locale, timezone }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=Inputs.d.ts.map

package/lib/cjs/components/periodpicker/components/Inputs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Inputs.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Inputs.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAMhC,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,KAAK,eA2FnF"}
+{"version":3,"file":"Inputs.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Inputs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAMhC,aAAK,KAAK,GAAG;IACZ,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAC,EAAE,KAAK,qBA2FnF"}

package/lib/cjs/components/periodpicker/components/Menu.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Period } from '../types';
 declare type Props = {
     periodName: string | undefined;
@@ -6,6 +6,6 @@ declare type Props = {
     onChange: (period: Period) => void;
     onShowCustomPeriod: ((show: boolean) => void) | undefined;
 };
-export default function Menu({ onChange, onShowCustomPeriod, periodName, timezone }: Props): JSX.Element;
+export default function Menu({ onChange, onShowCustomPeriod, periodName, timezone }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=Menu.d.ts.map

package/lib/cjs/components/periodpicker/components/Menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Menu.tsx"],"names":[],"mappings":";AAMA,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAgBhC,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAC,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,KAAK,eA2KvF"}
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAC,MAAM,EAAC,MAAM,UAAU,CAAC;AAgBhC,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,kBAAkB,EAAE,CAAC,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC,GAAG,SAAS,CAAC;CAC1D,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAAC,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,QAAQ,EAAC,EAAE,KAAK,qBA2KvF"}

package/lib/cjs/components/periodpicker/components/MonthPicker.d.ts

@@ -12,8 +12,8 @@ declare type State = {
 };
 export default class MonthPicker extends React.Component<Props, State> {
     constructor(props: Props);
-    tdMonth: (month: number) => JSX.Element;
-    render(): JSX.Element;
+    tdMonth: (month: number) => React.JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=MonthPicker.d.ts.map

package/lib/cjs/components/periodpicker/components/MonthPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/MonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,QAAQ,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,aAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,aAAK,KAAK,GAAG;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzD,KAAK,EAAE,KAAK;IAWxB,OAAO,UAAW,MAAM,iBAiBtB;IAEF,MAAM;CAwDN"}
+{"version":3,"file":"MonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/periodpicker/components/MonthPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,aAAK,QAAQ,GAAG;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;CAChD,CAAC;AAEF,aAAK,KAAK,GAAG,QAAQ,CAAC;AAEtB,aAAK,KAAK,GAAG;IACZ,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;gBACzD,KAAK,EAAE,KAAK;IAWxB,OAAO,UAAW,MAAM,uBAiBtB;IAEF,MAAM;CAwDN"}

package/lib/cjs/components/periodpicker/usePeriodName.d.ts

@@ -3,5 +3,5 @@ import { Period } from './types';
  * This hook takes a period and tries to find its translation.
  * @param period
  */
-export default function usePeriodName(period: Period, timezone: string | undefined): any;
+export default function usePeriodName(period: Period, timezone: string | undefined): string | undefined;
 //# sourceMappingURL=usePeriodName.d.ts.map

package/lib/cjs/components/periodpicker/usePeriodName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePeriodName.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/usePeriodName.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAgB/B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,OAoCjF"}
+{"version":3,"file":"usePeriodName.d.ts","sourceRoot":"","sources":["../../../../src/components/periodpicker/usePeriodName.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAgB/B;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,sBAoCjF"}

package/lib/cjs/components/periodpicker/usePeriodName.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_i18next_1 = require("react-i18next");
+const i18n_1 = require("../../i18n");
 const periods_1 = require("./periods");
 function compare(period1, period2) {
     return period1.tsStart === period2.tsStart && period1.tsEnd === period2.tsEnd;
@@ -10,7 +10,7 @@ function compare(period1, period2) {
  * @param period
  */
 function usePeriodName(period, timezone) {
-    const { t } = (0, react_i18next_1.useTranslation)();
+    const { t } = (0, i18n_1.useTranslation)();
     if (compare(period, (0, periods_1.createToday)(timezone))) {
         return t('trend.calendarMenu.timePeriod.today', { defaultValue: 'Today' });
     }

package/lib/cjs/components/prompt/Prompt.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { TranslationDescriptor } from '../../types/i18n';
 export declare type Props = {
     /** Title of the Prompt's content */
@@ -19,5 +19,5 @@ export declare type Props = {
 /**
  * This component should not be used directly, instead use `@withPrompt` to inject a promise-based prompt method
  */
-export default function Prompt({ title, message, onAccept, onCancel, inputPlaceholder, cancelButtonLabel, acceptButtonLabel }: Props): JSX.Element;
+export default function Prompt({ title, message, onAccept, onCancel, inputPlaceholder, cancelButtonLabel, acceptButtonLabel }: Props): React.JSX.Element;
 //# sourceMappingURL=Prompt.d.ts.map

package/lib/cjs/components/prompt/Prompt.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,oCAAoC;IACpC,KAAK,EAAE,qBAAqB,CAAC;IAE7B,wCAAwC;IACxC,OAAO,EAAE,qBAAqB,CAAC;IAE/B,cAAc;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,cAAc;IACd,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAEvC,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,EAAE,KAAK,eAiEP"}
+{"version":3,"file":"Prompt.d.ts","sourceRoot":"","sources":["../../../../src/components/prompt/Prompt.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,KAAK,GAAG;IACnB,oCAAoC;IACpC,KAAK,EAAE,qBAAqB,CAAC;IAE7B,wCAAwC;IACxC,OAAO,EAAE,qBAAqB,CAAC;IAE/B,cAAc;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,cAAc;IACd,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,KAAK,GAAG,CAAC;IAEvC,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,qBAAqB,CAAC;IAE1C,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;CACzC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,EAAE,KAAK,qBAiEP"}

package/lib/cjs/components/reactable/Reactable.d.ts

@@ -33,6 +33,6 @@ export declare type Props<T, ID extends string | number | undefined | null = any
  * Each column can also be extended to be sortable and/or filterable
  */
 export default class Reactable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 //# sourceMappingURL=Reactable.d.ts.map

package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts

@@ -1,21 +1,19 @@
-import * as React from 'react';
+import React from 'react';
 import { ReactableColumnDef, ReactableRowDef, ReactableFilterSettings } from '../types';
 import { Pageable, PaginationSettings, SortDirection } from '../../../types/pagination';
 declare type Props<T, ID extends string | number | undefined | null> = {
-    columnDefs: Array<ReactableColumnDef<T>>;
-    uniqueItemKey: (arg0: T) => ID;
+    columnDefs: ReactableColumnDef<T>[];
+    uniqueItemKey: (item: T) => ID;
     paginationSettings: PaginationSettings;
     onSort: (property: string, direction: SortDirection) => void;
     onFilter?: (filterSettings: ReactableFilterSettings) => void;
-    pageable: Pageable<T> | null | undefined;
+    pageable?: Pageable<T> | null;
     isLoading: boolean;
     rowDef?: ReactableRowDef<T>;
     clickable?: boolean;
     messageWhenEmpty?: string;
     'data-testid'?: string;
 };
-export default class ReactableTable<T = any, ID extends string | number | undefined | null = any> extends React.Component<Props<T, ID>> {
-    render(): JSX.Element;
-}
-export {};
+declare const ReactableTable: <T, ID extends string | number | null | undefined>({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, "data-testid": testId }: Props<T, ID>) => React.JSX.Element;
+export default ReactableTable;
 //# sourceMappingURL=ReactableTable.d.ts.map

package/lib/cjs/components/reactable/helpers/ReactableTable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAS/B,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAEtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;IACzC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,cAAc,CAClC,CAAC,GAAG,GAAG,EACP,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,GAAG,GAAG,CAClD,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACtC,MAAM;CA+DN"}
+{"version":3,"file":"ReactableTable.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoC,MAAM,OAAO,CAAC;AAQzD,OAAO,EAAC,kBAAkB,EAAE,eAAe,EAAE,uBAAuB,EAAC,MAAM,UAAU,CAAC;AACtF,OAAO,EAAC,QAAQ,EAAE,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAGtF,aAAK,KAAK,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,IAAI;IAC9D,UAAU,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAAE,CAAC;IACpC,aAAa,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;IAC/B,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,CAAC,cAAc,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC7D,QAAQ,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC;IAC9B,SAAS,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,QAAA,MAAM,cAAc,6OAgHnB,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/lib/cjs/components/reactable/helpers/ReactableTable.js

@@ -26,37 +26,53 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const React = __importStar(require("react"));
+const react_1 = __importStar(require("react"));
 const i18n_1 = require("../../../i18n");
 const classnames_1 = __importDefault(require("classnames"));
 const ng_ui_basic_components_1 = require("@deviceinsight/ng-ui-basic-components");
 const ReactableTableRow_1 = __importDefault(require("./ReactableTableRow"));
 const ReactableTableHeader_1 = __importDefault(require("./ReactableTableHeader"));
 const ReactableTableFilterRow_1 = __importDefault(require("./ReactableTableFilterRow"));
-class ReactableTable extends React.Component {
-    render() {
-        const { columnDefs, rowDef, uniqueItemKey, paginationSettings, pageable, onSort, onFilter, isLoading, clickable, messageWhenEmpty } = this.props;
-        const showFilterRow = columnDefs.some((columnDef) => !!columnDef.filterable);
-        return (React.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
-            React.createElement("div", { className: "di reactable scroll-x" },
-                React.createElement("table", { className: (0, classnames_1.default)('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
-                    React.createElement("thead", null,
-                        React.createElement(ReactableTableHeader_1.default, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
-                    React.createElement("tbody", null,
-                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow_1.default, { columnDefs: columnDefs, onFilter: onFilter })),
-                        pageable &&
-                            pageable.content.length > 0 &&
-                            pageable.content.map((item, index) => {
-                                if (paginationSettings.size > index) {
-                                    return (React.createElement(ReactableTableRow_1.default, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
-                                }
-                                else {
-                                    return null;
-                                }
-                            }),
-                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
-                            React.createElement("td", { colSpan: columnDefs.length },
-                                React.createElement(i18n_1.Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
-    }
-}
+const ng_ui_api_client_1 = require("@deviceinsight/ng-ui-api-client");
+const ReactableTable = ({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const tableRef = (0, react_1.useRef)(null);
+    const [showHorizontalScrollingAdvice, setShowHorizontalScrollingAdvice] = (0, react_1.useState)(true);
+    const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/hidescrollingadvice';
+    (0, react_1.useEffect)(() => {
+        (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH).then((value) => setShowHorizontalScrollingAdvice(value === undefined ? false : !value));
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const updateScrollingAdvice = () => {
+            if (containerRef.current && tableRef.current) {
+                setShowHorizontalScrollingAdvice(showHorizontalScrollingAdvice && tableRef.current.scrollWidth > containerRef.current.offsetWidth);
+            }
+        };
+        window.addEventListener('resize', updateScrollingAdvice);
+        return () => window.removeEventListener('resize', updateScrollingAdvice);
+    }, [pageable, columnDefs, showHorizontalScrollingAdvice]);
+    const showFilterRow = columnDefs.some((col) => col.filterable);
+    return (react_1.default.createElement(ng_ui_basic_components_1.SpinnerContainer, { show: isLoading },
+        react_1.default.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
+            showHorizontalScrollingAdvice && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", header: react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"), content: react_1.default.createElement("div", { className: "scroll-horizontally-advice-buttons" },
+                    react_1.default.createElement(ng_ui_basic_components_1.Button, { primary: true, onClick: async () => {
+                            await (0, ng_ui_api_client_1.writeAccountObject)(HIDE_SCROLLING_ADVICE_PATH, true);
+                            setShowHorizontalScrollingAdvice(false);
+                        } },
+                        react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
+                    react_1.default.createElement(ng_ui_basic_components_1.Button, { onClick: () => setShowHorizontalScrollingAdvice(false) },
+                        react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK"))), width: '40%' })),
+            react_1.default.createElement("table", { ref: tableRef, className: (0, classnames_1.default)('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement(ReactableTableHeader_1.default, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                react_1.default.createElement("tbody", null,
+                    onFilter && showFilterRow && (react_1.default.createElement(ReactableTableFilterRow_1.default, { columnDefs: columnDefs, onFilter: onFilter })),
+                    pageable?.content.length
+                        ? pageable.content
+                            .slice(0, paginationSettings.size)
+                            .map((item) => (react_1.default.createElement(ReactableTableRow_1.default, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                        : !isLoading && (react_1.default.createElement("tr", null,
+                            react_1.default.createElement("td", { colSpan: columnDefs.length },
+                                react_1.default.createElement(i18n_1.Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
+};
 exports.default = ReactableTable;

package/lib/cjs/components/reactable/helpers/ReactableTableHeader.d.ts

@@ -9,8 +9,8 @@ declare type Props = {
 export default class ReactableTableHeader extends React.Component<Props> {
     handleSort: (columnDef: ReactableColumnDef<unknown>) => void;
     getClassName: (columnDef: ReactableColumnDef<any>) => "" | "sortable sortAsc" | "sortable sortDes" | "sortable";
-    printLabel: (label: ReactableColumnLabel) => string | number | boolean | React.ReactFragment | JSX.Element | import("../../../types/i18n").TranslationDescriptor | null | undefined;
-    render(): JSX.Element;
+    printLabel: (label: ReactableColumnLabel) => string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | import("../../../types/i18n").TranslationDescriptor | null | undefined;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=ReactableTableHeader.d.ts.map

package/lib/cjs/components/reactable/helpers/ReactableTableHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactableTableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAI5E,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvE,UAAU,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAO1D;IAEF,YAAY,cAAe,mBAAmB,GAAG,CAAC,+DAgBhD;IAEF,UAAU,UAAW,oBAAoB,4IAQvC;IAEF,MAAM;CAuBN"}
+{"version":3,"file":"ReactableTableHeader.d.ts","sourceRoot":"","sources":["../../../../../src/components/reactable/helpers/ReactableTableHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,kBAAkB,EAAE,oBAAoB,EAAC,MAAM,UAAU,CAAC;AAClE,OAAO,EAAC,kBAAkB,EAAE,aAAa,EAAC,MAAM,2BAA2B,CAAC;AAI5E,aAAK,KAAK,GAAG;IACZ,UAAU,EAAE,KAAK,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,CAAC;IAC3C,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,MAAM,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,aAAa,KAAK,IAAI,CAAC;CAC7D,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,CAAC;IACvE,UAAU,EAAE,CAAC,SAAS,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAAK,IAAI,CAO1D;IAEF,YAAY,cAAe,mBAAmB,GAAG,CAAC,+DAgBhD;IAEF,UAAU,UAAW,oBAAoB,wJAQvC;IAEF,MAAM;CAuBN"}

package/lib/cjs/components/reactable/helpers/ReactableTableRow.d.ts

@@ -10,7 +10,7 @@ export default class ReactableTableRow extends React.Component<Props<any>> {
     handleClick: () => void;
     getTooltip: () => string;
     getRowStyle: () => React.CSSProperties | undefined;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=ReactableTableRow.d.ts.map

package/lib/cjs/components/reactableWithClientSidePagination/ReactableWithClientSidePagination.d.ts

@@ -63,7 +63,7 @@ export default class ReactableWithClientSidePagination<T = any, ID extends strin
     handleSelectChange: (selected: boolean, item: T) => void;
     handleSelectAllChange: (selectedAll: boolean) => void;
     areSelectedAll: () => boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=ReactableWithClientSidePagination.d.ts.map