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

package/lib/esm/components/input/SelectWithSearch.js

@@ -28,7 +28,8 @@ export default class SelectWithSearch extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            options: []
+            options: [],
+            inputValue: null
         };
         this.selectRef = React.createRef();
         this.portalRoot = null;
@@ -71,7 +72,7 @@ export default class SelectWithSearch extends React.Component {
         }
     }
     componentDidUpdate(prevProps) {
-        if (!isEqual(prevProps.options, this.props.options)) {
+        if (!isEqual(prevProps.options, this.props.options) || prevProps.freeForm !== this.props.freeForm) {
             this.updateOptions();
         }
     }
@@ -83,8 +84,28 @@ export default class SelectWithSearch extends React.Component {
     render() {
         const { noResultsMessage, placeholder, value, onChange, clearable, loading, disabled } = this.props;
         const { options } = this.state;
-        return (React.createElement(Select, { ref: this.selectRef, joinValues: true, name: "form-field-name", className: this.getContainerClasses().join(' '), classNamePrefix: "select-search", isClearable: clearable, noOptionsMessage: noResultsMessage ? () => noResultsMessage : undefined, options: options, value: value || null, onChange: onChange, placeholder: placeholder, 
+        return (React.createElement(Select, { ref: this.selectRef, joinValues: true, name: "form-field-name", className: this.getContainerClasses().join(' '), classNamePrefix: "select-search", isClearable: clearable, noOptionsMessage: noResultsMessage ? () => noResultsMessage : undefined, options: options, value: value || null, onChange: onChange, onInputChange: (newValue) => {
+                if (this.props.freeForm && newValue) {
+                    this.setState({ inputValue: newValue });
+                }
+            }, placeholder: placeholder, 
             // @ts-ignore
-            filterOption: this.filterOption, isLoading: loading, menuPortalTarget: this.portalRoot, isDisabled: disabled }));
+            filterOption: this.filterOption, isLoading: loading, menuPortalTarget: this.portalRoot, isDisabled: disabled, onBlur: () => {
+                if (this.props.freeForm && this.state.inputValue !== null) {
+                    this.setState({ options: this.props.options });
+                    this.setState({ inputValue: this.state.inputValue }, () => {
+                        const newItem = {
+                            type: 'item',
+                            value: this.state.inputValue,
+                            label: this.state.inputValue
+                        };
+                        this.setState((prevState) => ({
+                            options: [newItem, ...prevState.options]
+                        }));
+                        this.state.inputValue = null;
+                        onChange(newItem);
+                    });
+                }
+            } }));
     }
 }

package/lib/esm/components/input/SelectWithSearchAsync.d.ts

@@ -52,7 +52,7 @@ export default class SelectWithSearchAsync<Item, ID extends string | number> ext
         options: Array<any>;
     }>;
     handleChange: (item: SelectItem<ID> | null | undefined) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=SelectWithSearchAsync.d.ts.map

package/lib/esm/components/input/UrnInput.d.ts

@@ -16,7 +16,7 @@ export default class UrnInput extends React.Component<Props, State> {
     state: State;
     handleEdit: () => void;
     handleChangeValue: (event: React.SyntheticEvent<HTMLInputElement>) => any;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=UrnInput.d.ts.map

package/lib/esm/components/input/ValidatedTextInput.d.ts

@@ -30,6 +30,6 @@ export default class ValidatedTextInput extends React.Component<Props> {
         required: boolean;
     };
     handleChange: (e: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 //# sourceMappingURL=ValidatedTextInput.d.ts.map

package/lib/esm/components/input/__tests__/DateInput.spec.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
+import { describe, expect, it, vi } from 'vitest';
 import dayjs from 'dayjs';
 import { act, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import DateInput from '../DateInput';
-jest.mock('i18next', () => ({ language: 'de' }));
 const DateStateProvider = ({ children, initialValue }) => {
     const [state, setState] = useState(initialValue);
     return children(state, setState);
@@ -35,7 +35,7 @@ describe('DateInput.js', () => {
             expect(screen.getByTestId('date-input')).toHaveClass('invalid');
         });
         it('should call onChange callback with parsed value of the input during the input is being changed when the value is valid', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             await act(async () => {
                 render(React.createElement(DateInput, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
             });
@@ -46,7 +46,7 @@ describe('DateInput.js', () => {
             expect(dayjs(currentValue).toISOString()).toEqual(dayjs('2019-02-02').toISOString());
         });
         it('should not call onChange callback while editing the input when the input value is invalid', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             await act(async () => {
                 render(React.createElement(DateInput, { value: new Date('2019-02-01').getTime(), onChange: onChange }));
             });
@@ -72,7 +72,7 @@ describe('DateInput.js', () => {
             expect(screen.getByTestId('date-input')).toHaveValue('dateInput.invalidDate');
         });
         it('should call onChange callback with [null, true] when empty string is set to input field', async () => {
-            const onChange = jest.fn();
+            const onChange = vi.fn();
             await act(async () => {
                 render(React.createElement(DateInput, { value: Date.now(), onChange: onChange }));
             });

package/lib/esm/components/input/__tests__/DateTimeInput.spec.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { describe, expect, it } from 'vitest';
 import DateTimeInput from '../DateTimeInput';
 import { render, screen } from '@testing-library/react';
 describe('DateTimeInput.js', () => {

package/lib/esm/components/input/__tests__/SelectWithSearchAsync.spec.js

@@ -1,11 +1,12 @@
 import React from 'react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import SelectWithSearchAsync from '../SelectWithSearchAsync';
 import { render, screen, waitFor } from '@testing-library/react';
 // helper data
 const obj1 = { id: 1, label: 'obj 1' };
 const obj5 = { id: 5, label: 'obj 5' };
 const content = [obj1, obj5];
-const searchByQuery = jest.fn(() => Promise.resolve({
+const searchByQuery = vi.fn(() => Promise.resolve({
     content,
     totalElements: 2,
     totalPages: 1,
@@ -13,7 +14,7 @@ const searchByQuery = jest.fn(() => Promise.resolve({
     size: 5,
     sort: []
 }));
-const searchById = jest.fn((id) => Promise.resolve(content.find((item) => item.id === id)));
+const searchById = vi.fn((id) => Promise.resolve(content.find((item) => item.id === id)));
 const noop = () => { };
 describe('SelectWithSearchAsync.js', () => {
     beforeEach(() => {

package/lib/esm/components/link/RouteLink.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { RouteComponentProps } from 'react-router-dom';
 import { TranslationDescriptor } from '../../types/i18n';
 declare type LocationShape = RouteComponentProps['location'];
@@ -26,6 +26,6 @@ export declare type Props = {
  * RouteLink enables the possibility to add new links to existing routes.
  * Those routes can also be accessed via `keyboardShortcut`
  */
-export default function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }: Props): JSX.Element;
+export default function RouteLink({ to, confirm, className, title, children, keyboardShortcut, ...otherProps }: Props): React.JSX.Element;
 export {};
 //# sourceMappingURL=RouteLink.d.ts.map

package/lib/esm/components/link/RouteLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RouteLink.d.ts","sourceRoot":"","sources":["../../../../src/components/link/RouteLink.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAC,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,aAAK,aAAa,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;AAKrD,oBAAY,KAAK,GAAG;IACnB,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;SAKK;IACL,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;IAE1F,cAAc;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAC,EAAE,KAAK,eAkElH"}
+{"version":3,"file":"RouteLink.d.ts","sourceRoot":"","sources":["../../../../src/components/link/RouteLink.tsx"],"names":[],"mappings":"AACA,OAAO,KAA+B,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAC,mBAAmB,EAAa,MAAM,kBAAkB,CAAC;AAEjE,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,aAAK,aAAa,GAAG,mBAAmB,CAAC,UAAU,CAAC,CAAC;AAKrD,oBAAY,KAAK,GAAG;IACnB,EAAE,EAAE,MAAM,GAAG,aAAa,CAAC;IAE3B,sBAAsB;IACtB,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAE9B,kDAAkD;IAClD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;;SAKK;IACL,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,GAAG,CAAC,aAAa,GAAG,IAAI,GAAG,SAAS,CAAC,CAAC,CAAC;IAE1F,cAAc;IACd,QAAQ,CAAC,EAAE,GAAG,CAAC;IAEf,cAAc;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,cAAc;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAC,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,UAAU,EAAC,EAAE,KAAK,qBAkElH"}

package/lib/esm/components/multiMenu/MultiMenu.d.ts

@@ -21,7 +21,7 @@ declare type State = {
 export default class MultiMenu extends React.Component<Props, State> {
     state: State;
     toggleMenu: () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=MultiMenu.d.ts.map

package/lib/esm/components/multiMenu/components/MultiMenuItem.d.ts

@@ -9,6 +9,6 @@ export declare type Props = {
 };
 export default class MultiMenuItem extends React.PureComponent<Props> {
     createClickHandler: (toggleMenu: () => void) => () => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 //# sourceMappingURL=MultiMenuItem.d.ts.map

package/lib/esm/components/pagination/Pagination.d.ts

@@ -31,7 +31,7 @@ export default class Pagination extends React.Component<Props, State> {
     onChangeSize: (event: React.SyntheticEvent<HTMLSelectElement>) => void;
     notifyPageChange: (page: number) => void;
     handlePageInputChange: (event: React.SyntheticEvent<HTMLInputElement>) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export {};
 //# sourceMappingURL=Pagination.d.ts.map

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

@@ -1,87 +1,87 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { describe, expect, it, vi } from 'vitest';
 import Pagination from '../Pagination';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 describe('Pagination.js', () => {
     it('should disable all buttons when there is only one page', () => {
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 0, totalPages: 1, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.disabled')).toHaveLength(4);
+        const { container } = render(React.createElement(Pagination, { page: 0, totalPages: 1, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.disabled')).toHaveLength(4);
     });
     it('should disable "prev" and "first" when the first page is selected', () => {
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.prev.disabled')).toHaveLength(2);
+        const { container } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.prev.disabled')).toHaveLength(2);
     });
     it('should disable "next" and "last" when the last page is selected', () => {
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.next.disabled')).toHaveLength(2);
+        const { container } = render(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        expect(container.querySelectorAll('span.next.disabled')).toHaveLength(2);
     });
     it('should not disable buttons when on a page > 0 and < max pages', () => {
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
-        expect(PaginationWrapper.find('span.disabled')).toHaveLength(0);
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        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 = shallow(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.prev').first().simulate('click');
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.prev')[0]);
         expect(handleChangePage).toHaveBeenCalledWith(0);
     });
-    it('should go to the previous page when the user clicks "prev"', () => {
+    it('should go to the previous page when the user clicks "prev"', async () => {
         const page = 2;
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: page, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.prev').last().simulate('click');
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: page, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.prev')[1]);
         expect(handleChangePage).toHaveBeenCalledWith(page - 1);
     });
     it('should go to the next page when the user clicks "next"', () => {
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.next').first().simulate('click');
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 2, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.next')[0]);
         expect(handleChangePage).toHaveBeenCalledWith(3);
     });
     it('should go to the last page when the user clicks "last"', () => {
-        const handleChangePage = jest.fn();
-        const PaginationWrapper = shallow(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
-        PaginationWrapper.find('span.next').last().simulate('click');
+        const handleChangePage = vi.fn();
+        const { container } = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: handleChangePage }));
+        fireEvent.click(container.querySelectorAll('span.next')[1]);
         expect(handleChangePage).toHaveBeenCalledWith(9);
     });
     it('should match snapshot', () => {
-        const PaginationWrapper1 = shallow(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
-        const PaginationWrapper2 = shallow(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
-        const PaginationWrapper3 = shallow(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper1 = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper2 = render(React.createElement(Pagination, { page: 5, totalPages: 10, onChangePage: () => { } }));
+        const PaginationWrapper3 = render(React.createElement(Pagination, { page: 9, totalPages: 10, onChangePage: () => { } }));
         expect(PaginationWrapper1).toMatchSnapshot();
         expect(PaginationWrapper2).toMatchSnapshot();
         expect(PaginationWrapper3).toMatchSnapshot();
     });
     describe('handlePageInputChange', () => {
-        it('should set page number if input is a correct number', () => {
-            const PaginationWrapper = shallow(React.createElement(Pagination, { 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
+        it('should set page number if input is a correct number', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '4' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).toHaveBeenCalledWith(3);
+            });
         });
-        it('should not set page number if input is bigger than totalPages', () => {
-            const PaginationWrapper = shallow(React.createElement(Pagination, { 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();
+        it('should not set page number if input is bigger than totalPages', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '12' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).not.toHaveBeenCalled();
+            });
         });
-        it('should not set empty string as state and not call notifyPageChange', () => {
-            const PaginationWrapper = shallow(React.createElement(Pagination, { 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();
+        it('should not set an empty string as page state', async () => {
+            const handleChangePage = vi.fn();
+            const { getByRole } = render(React.createElement(Pagination, { page: 0, totalPages: 10, onChangePage: handleChangePage }));
+            const input = getByRole('textbox');
+            fireEvent.change(input, { target: { value: '' } });
+            fireEvent.blur(input);
+            await waitFor(() => {
+                expect(handleChangePage).not.toHaveBeenCalled();
+            });
         });
     });
 });

package/lib/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/periodpicker/usePeriodName.js

@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from '../../i18n';
 import { createCurrentMonth, createCurrentWeek, createLastXDays, createToday, createWholeDay, createWholeMonth, createYesterday, periodToDays } from './periods';
 function compare(period1, period2) {
     return period1.tsStart === period2.tsStart && period1.tsEnd === period2.tsEnd;

package/lib/esm/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/esm/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/esm/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/esm/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/esm/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/esm/components/reactable/helpers/ReactableTable.js

@@ -1,33 +1,50 @@
-import * as React from 'react';
+import React, { useRef, useEffect, useState } from 'react';
 import { Trans } from '../../../i18n';
 import cx from 'classnames';
-import { SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
+import { Button, Modal, SpinnerContainer } from '@deviceinsight/ng-ui-basic-components';
 import ReactableTableRow from './ReactableTableRow';
 import ReactableTableHeader from './ReactableTableHeader';
 import ReactableTableFilterRow from './ReactableTableFilterRow';
-export default 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(SpinnerContainer, { show: isLoading },
-            React.createElement("div", { className: "di reactable scroll-x" },
-                React.createElement("table", { className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": this.props['data-testid'] },
-                    React.createElement("thead", null,
-                        React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
-                    React.createElement("tbody", null,
-                        onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
-                        pageable &&
-                            pageable.content.length > 0 &&
-                            pageable.content.map((item, index) => {
-                                if (paginationSettings.size > index) {
-                                    return (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef }));
-                                }
-                                else {
-                                    return null;
-                                }
-                            }),
-                        (!pageable || !pageable.content.length) && !isLoading && (React.createElement("tr", null,
+import { readAccountObject, writeAccountObject } from '@deviceinsight/ng-ui-api-client';
+const ReactableTable = ({ columnDefs, uniqueItemKey, paginationSettings, onSort, onFilter, pageable, isLoading, rowDef, clickable, messageWhenEmpty, 'data-testid': testId }) => {
+    const containerRef = useRef(null);
+    const tableRef = useRef(null);
+    const [showHorizontalScrollingAdvice, setShowHorizontalScrollingAdvice] = useState(true);
+    const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/hidescrollingadvice';
+    useEffect(() => {
+        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => setShowHorizontalScrollingAdvice(value === undefined ? false : !value));
+    }, []);
+    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.createElement(SpinnerContainer, { show: isLoading },
+        React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
+            showHorizontalScrollingAdvice && (React.createElement(Modal, { className: "scroll-horizontally-advice", header: React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"), content: React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
+                    React.createElement(Button, { primary: true, onClick: async () => {
+                            await writeAccountObject(HIDE_SCROLLING_ADVICE_PATH, true);
+                            setShowHorizontalScrollingAdvice(false);
+                        } },
+                        React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.neverShowAgain" }, "Never show again")),
+                    React.createElement(Button, { onClick: () => setShowHorizontalScrollingAdvice(false) },
+                        React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.ok" }, "OK"))), width: '40%' })),
+            React.createElement("table", { ref: tableRef, className: cx('di reactable sortable hoverable', { selectable: clickable }), "data-testid": testId },
+                React.createElement("thead", null,
+                    React.createElement(ReactableTableHeader, { columnDefs: columnDefs, paginationSettings: paginationSettings, onSort: onSort })),
+                React.createElement("tbody", null,
+                    onFilter && showFilterRow && (React.createElement(ReactableTableFilterRow, { columnDefs: columnDefs, onFilter: onFilter })),
+                    pageable?.content.length
+                        ? pageable.content
+                            .slice(0, paginationSettings.size)
+                            .map((item) => (React.createElement(ReactableTableRow, { key: uniqueItemKey(item), columnDefs: columnDefs, item: item, rowDef: rowDef })))
+                        : !isLoading && (React.createElement("tr", null,
                             React.createElement("td", { colSpan: columnDefs.length },
                                 React.createElement(Trans, { i18nKey: messageWhenEmpty ?? 'reactable.noEntriesFound' }, "No entries found")))))))));
-    }
-}
+};
+export default ReactableTable;