@deviceinsight/ng-ui-components 6.23.0 → 6.25.0

package/lib/cjs/assets/style.css

@@ -74,7 +74,7 @@
 .di.upload,
 .di.upload * {transition:all .1s ease;}
 .di.upload {margin:0; padding:0; width:100%; height:100%; min-height:80px; font-size:16px; border:1px dashed #888; border-radius:4px; overflow:hidden; user-select:none;}
-.di.upload {display:flex; align-items:center;}
+.di.upload {display:flex; flex-direction:column; align-items:center;}
 .di.upload:hover {border-color:#666;  background:#f9f9f9;}
 .di.upload:active {background:#eee;}
 .di.upload > div {width:100%; height:100%;}

package/lib/cjs/components/input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}

package/lib/cjs/components/input/DateTimeInput.js

@@ -26,10 +26,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+const dayjs_1 = __importDefault(require("dayjs"));
 const react_1 = __importStar(require("react"));
 const periods_1 = require("../periodpicker/periods");
 const DateInput_1 = __importDefault(require("./DateInput"));
 const ValidatedTextInput_1 = __importDefault(require("./ValidatedTextInput"));
+const lodash_1 = require("lodash");
 const extractTime = (timezone, date) => {
     try {
         return (0, periods_1.dayjsTz)(timezone, date).format('HH:mm');
@@ -39,6 +41,15 @@ const extractTime = (timezone, date) => {
         return '00:00';
     }
 };
+const extractDate = (timezone, date) => {
+    try {
+        return (0, dayjs_1.default)((0, periods_1.dayjsTz)(timezone, date).format('YYYY-MM-DD'));
+    }
+    catch (error) {
+        console.error('DateTimeInput: Error while extracting time from date', error);
+        return (0, dayjs_1.default)(new Date());
+    }
+};
 /**
  * Extends DateInput but also displaying the current time.
  * Usually the user's locale is used for displaying the correct date format.
@@ -51,17 +62,36 @@ function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChang
     }, [timezone, timestamp]);
     function handleChangeDate(date, fromTextField) {
         const oldDate = (0, periods_1.dayjsTz)(timezone, timestamp);
-        onChange((0, periods_1.dayjsTz)(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
+        const dateFix = (0, dayjs_1.default)(date);
+        let newDate = (0, periods_1.dayjsTz)(timezone, date)
+            .set('day', dateFix.day())
+            .set('month', dateFix.month())
+            .set('year', dateFix.year())
+            .set('hour', (0, lodash_1.toInteger)(oldDate.hour()))
+            .set('minute', (0, lodash_1.toInteger)(oldDate.minute()));
+        const dstOffset = getLocalDstOffset(newDate);
+        newDate = newDate.subtract(dstOffset, 'minutes');
+        onChange(newDate.valueOf(), fromTextField);
+    }
+    function getMaxUtcOffset(year) {
+        const jan = new Date(`${year}-01-01`).getTimezoneOffset();
+        const jul = new Date(`${year}-07-01`).getTimezoneOffset();
+        return Math.min(jan, jul);
+    }
+    function getLocalDstOffset(newDate) {
+        return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
     }
     function handleChangeTime(time, valid) {
         if (valid) {
             const [hours, minutes] = time.split(':');
-            onChange((0, periods_1.dayjsTz)(timezone, timestamp)
+            const date = extractDate(timezone, timestamp);
+            const dateTime = (0, periods_1.dayjsTz)(timezone, timestamp)
+                .set('date', date.date())
                 .set('hour', parseInt(hours, 10))
                 .set('minute', parseInt(minutes, 10))
                 .set('second', 0)
-                .set('millisecond', 0)
-                .valueOf());
+                .set('millisecond', 0);
+            onChange(dateTime.valueOf());
         }
         setTime(time);
     }
@@ -71,7 +101,7 @@ function DateTimeInput({ timestamp, timezone, warning, readOnly = false, onChang
         }
     }
     return (react_1.default.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
-        react_1.default.createElement(DateInput_1.default, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
+        react_1.default.createElement(DateInput_1.default, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
         react_1.default.createElement(ValidatedTextInput_1.default, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
                 borderColor: 'red'
             }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));

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

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const vitest_1 = require("vitest");
 const DateTimeInput_1 = __importDefault(require("../DateTimeInput"));
 const react_2 = require("@testing-library/react");
+const testing_library_1 = require("@storybook/testing-library");
 (0, vitest_1.describe)('DateTimeInput.js', () => {
     (0, vitest_1.it)('should update time when timestamp has changed', () => {
         const { rerender } = (0, react_2.render)(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -15,4 +16,24 @@ const react_2 = require("@testing-library/react");
         rerender(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
         (0, vitest_1.expect)(timeElement).toHaveDisplayValue('03:24');
     });
+    (0, vitest_1.it)('should display the time and date as timezone date', async () => {
+        const { rerender } = (0, react_2.render)(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-01T11:11:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        const timeElementUtm = react_2.screen.queryByDisplayValue('11:11');
+        (0, vitest_1.expect)(timeElementUtm).not.toBeInTheDocument();
+        const timeElement = react_2.screen.queryByDisplayValue('03:11');
+        (0, vitest_1.expect)(timeElement).toBeInTheDocument();
+        const dateElement = react_2.screen.queryByDisplayValue('01.02.2019');
+        (0, vitest_1.expect)(dateElement).toBeInTheDocument();
+        rerender(react_1.default.createElement(DateTimeInput_1.default, { timestamp: new Date('2019-02-02T03:24:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        (0, vitest_1.expect)(timeElement).toHaveDisplayValue('19:24');
+        (0, vitest_1.expect)(dateElement).toHaveDisplayValue('01.02.2019');
+        await (0, react_2.act)(async () => {
+            dateElement?.click();
+            timeElement?.click();
+            testing_library_1.userEvent.clear(timeElement);
+            testing_library_1.userEvent.type(timeElement, '10:24');
+        });
+        (0, vitest_1.expect)(timeElement).toHaveDisplayValue('10:24');
+        (0, vitest_1.expect)(dateElement).toHaveDisplayValue('01.02.2019');
+    });
 });

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,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}

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

@@ -38,7 +38,8 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
     const containerRef = (0, react_1.useRef)(null);
     const tableRef = (0, react_1.useRef)(null);
     const [showScrollingAdvice, setShowScrollingAdvice] = (0, react_1.useState)(false);
-    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(false);
+    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = (0, react_1.useState)(true);
+    const [hasInitialized, setHasInitialized] = (0, react_1.useState)(false);
     const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
     const neverShowScrollingAdviceRef = (0, react_1.useRef)(neverShowScrollingAdvice);
     (0, react_1.useEffect)(() => {
@@ -50,14 +51,25 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
         }
     };
     (0, react_1.useEffect)(() => {
-        (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
-            const neverShow = value === undefined ? false : value;
-            setNeverShowScrollingAdvice(neverShow);
-            neverShowScrollingAdviceRef.current = neverShow;
-            if (containerRef.current && tableRef.current) {
-                updateScrollingAdvice();
-            }
-        });
+        setTimeout(() => {
+            (async () => {
+                try {
+                    const value = await (0, ng_ui_api_client_1.readAccountObject)(HIDE_SCROLLING_ADVICE_PATH);
+                    const neverShow = value === true;
+                    setNeverShowScrollingAdvice(neverShow);
+                    neverShowScrollingAdviceRef.current = neverShow;
+                    if (!neverShow) {
+                        updateScrollingAdvice();
+                    }
+                }
+                catch (error) {
+                    setNeverShowScrollingAdvice(false);
+                    neverShowScrollingAdviceRef.current = false;
+                    updateScrollingAdvice();
+                }
+                setHasInitialized(true);
+            })();
+        }, 0);
     }, []);
     (0, react_1.useEffect)(() => {
         updateScrollingAdvice();
@@ -67,7 +79,7 @@ function ReactableTable({ columnDefs, uniqueItemKey, paginationSettings, onSort,
     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" },
-            showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
+            hasInitialized && showScrollingAdvice && !isLoading && (react_1.default.createElement(ng_ui_basic_components_1.Modal, { className: "scroll-horizontally-advice", content: react_1.default.createElement("div", null,
                     react_1.default.createElement(i18n_1.Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
                     react_1.default.createElement("div", { className: "scroll-horizontally-advice-buttons" },
                         react_1.default.createElement(ng_ui_basic_components_1.Button, { primary: true, onClick: async () => {

package/lib/cjs/components/upload/FileUpload.d.ts

@@ -10,12 +10,8 @@ export declare type PreviewComponentProps = {
 export declare type Props = {
     /** (Optional) string for accepting files */
     accept?: string;
-    /** Function, executed when a file gets removed */
-    onRemoveFile: () => void;
     /** Optional Function, executed to download the file */
-    onDownloadFile?: () => void;
-    /** Function, executed when a file gets selected */
-    onSelectFile: (file: DropzoneFile) => void;
+    onDownloadFile?: (file: DropzoneFile) => void;
     /** (Optional) function, executed when a file gets dragged into the upload field and accepted */
     onDropAccepted?: () => void;
     /** (Optional) function, executed when a file gets dragged into the upload field and rejected */
@@ -32,9 +28,27 @@ export declare type Props = {
     previewComponent?: React.ComponentType<PreviewComponentProps>;
     /** (Optional) Maximum upload size */
     maxSize?: number;
-};
+} & ({
+    /** (Optional) accept multiple files */
+    multiple?: false;
+    /** Function, executed when files get added or removed */
+    onChange?: (files: DropzoneFile[]) => void;
+    /** Function, executed when a file gets removed */
+    onRemoveFile: (file: DropzoneFile) => void;
+    /** Function, executed when a file gets selected */
+    onSelectFile: (file: DropzoneFile) => void;
+} | {
+    /** (Optional) accept multiple files */
+    multiple: true;
+    /** Function, executed when files get added or removed */
+    onChange: (files: DropzoneFile[]) => void;
+    /** Function, executed when a file gets removed */
+    onRemoveFile?: (file: DropzoneFile) => void;
+    /** Function, executed when a file gets selected */
+    onSelectFile?: (file: DropzoneFile) => void;
+});
 export declare type State = {
-    file: DropzoneFile | null | undefined;
+    files: DropzoneFile[];
 };
 /**
  * FileUpload enables the possibility to upload files conveniently
@@ -60,8 +74,8 @@ export default class FileUpload extends React.Component<Props, State> {
     };
     state: State;
     handleDrop: (accepted: Array<DropzoneFile>, rejected: Array<DropzoneFile>) => void;
-    selectFile: (arg0: DropzoneFile) => void;
-    handleRemoveFile: () => void;
+    selectFile: (files: DropzoneFile[]) => void;
+    handleRemoveFile: (file: DropzoneFile) => void;
     render(): React.JSX.Element;
 }
 //# sourceMappingURL=FileUpload.d.ts.map

package/lib/cjs/components/upload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAEvD,oBAAY,YAAY,GAAG,IAAI,GAAG;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,qBAAqB,GAAG;IACnC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAC;CACzB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,kDAAkD;IAClD,YAAY,EAAE,MAAM,IAAI,CAAC;IAEzB,uDAAuD;IACvD,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,mDAAmD;IACnD,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IAE3C,gGAAgG;IAChG,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,gGAAgG;IAChG,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,KAAK,IAAI,CAAC;IAEjD,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IAEjC,qDAAqD;IACrD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAElC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,wDAAwD;IACxD,UAAU,CAAC,EAAE,qBAAqB,CAAC;IAEnC,gEAAgE;IAChE,gBAAgB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IAE9D,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,oBAAY,KAAK,GAAG;IACnB,IAAI,EAAE,YAAY,GAAG,IAAI,GAAG,SAAS,CAAC;CACtC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IACpE,MAAM,CAAC,YAAY,EAAE;QACpB,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,QAAQ,EAAE;YACT,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,SAAS,EAAE;YACV,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;QACF,UAAU,EAAE;YACX,YAAY,EAAE,MAAM,CAAC;YACrB,EAAE,EAAE,MAAM,CAAC;SACX,CAAC;KACF,CAiBC;IAEF,KAAK,EAAE,KAAK,CAEV;IAEF,UAAU,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,EAAE,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,KAAK,IAAI,CAgBhF;IAEF,UAAU,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAMtC;IAEF,gBAAgB,EAAE,MAAM,IAAI,CAW1B;IAEF,MAAM;CAqEN"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/FileUpload.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/upload/FileUpload.js

@@ -38,58 +38,66 @@ class FileUpload extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            file: null
+            files: []
         };
         this.handleDrop = (accepted, rejected) => {
-            if (accepted.length > 1) {
+            if (!this.props.multiple && accepted.length > 1) {
                 return;
             }
             if (rejected.length > 0) {
                 return;
             }
-            const file = accepted[0];
             /** Prevent console error on <Dropzone /> component */
-            setTimeout(() => this.selectFile(file), 100);
+            setTimeout(() => this.selectFile(accepted), 100);
         };
-        this.selectFile = (file) => {
-            file.preview = URL.createObjectURL(file);
-            this.setState({
-                file
+        this.selectFile = (files) => {
+            const { onSelectFile, onChange } = this.props;
+            files.forEach((file) => {
+                file.preview = URL.createObjectURL(file);
             });
-            this.props.onSelectFile(file);
+            const newFiles = [...this.state.files, ...files];
+            this.setState({ files: newFiles });
+            onChange?.(newFiles);
+            if (onSelectFile) {
+                files.forEach((file) => {
+                    onSelectFile(file);
+                });
+            }
         };
-        this.handleRemoveFile = () => {
-            const { file } = this.state;
-            const { onRemoveFile } = this.props;
+        this.handleRemoveFile = (file) => {
+            const { files } = this.state;
             if (file) {
                 if (file.preview)
                     window.URL.revokeObjectURL(file.preview);
-                onRemoveFile();
-                this.setState({
-                    file: null
-                });
+                const newFiles = files.filter((f) => f !== file);
+                this.setState({ files: newFiles });
+                this.props.onChange?.(newFiles);
+                this.props.onRemoveFile?.(file);
             }
         };
     }
     render() {
-        const { file } = this.state;
+        const { files } = this.state;
         const { accept, previewComponent: Preview, dropHint, hoverHint, acceptHint, rejectHint, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onChange, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         onRemoveFile, onDownloadFile, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        onSelectFile, onDropRejected, onDropAccepted, maxSize, ...otherProps } = this.props;
+        onSelectFile, onDropRejected, onDropAccepted, maxSize, multiple, ...otherProps } = this.props;
         const dropHintOrDefault = dropHint || FileUpload.defaultProps.dropHint;
         const hoverHintOrDefault = hoverHint || FileUpload.defaultProps.hoverHint;
         const acceptHintOrDefault = acceptHint || FileUpload.defaultProps.acceptHint;
         const rejectHintOrDefault = rejectHint || FileUpload.defaultProps.rejectHint;
         return (React.createElement("div", { ...otherProps, className: (0, classnames_1.default)('di upload', {
-                clickable: !file,
-                hasContent: !!file
+                clickable: !files.length,
+                hasContent: !!files.length
             }) },
-            !!file && !!Preview && (
-            // @ts-ignore
-            React.createElement(Preview, { file: file, onRemoveFile: this.handleRemoveFile, onDownloadFile: onDownloadFile })),
-            !file && (React.createElement(react_dropzone_1.default, { accept: accept, multiple: false, style: {
+            !!Preview &&
+                files.map((file, i) => (React.createElement(Preview, { key: i, file: file, onRemoveFile: () => this.handleRemoveFile(file), 
+                    // @ts-ignore
+                    onDownloadFile: onDownloadFile && (() => onDownloadFile(file)) }))),
+            (multiple || !files.length) && (React.createElement(react_dropzone_1.default, { accept: accept, multiple: multiple ?? false, style: {
                     border: 'none'
                 }, onDrop: this.handleDrop, onDropRejected: onDropRejected, onDropAccepted: onDropAccepted, activeClassName: "active", acceptClassName: "accept", rejectClassName: "reject", maxSize: maxSize || Infinity },
                 React.createElement("div", { className: "drag-drop-text-container" },

package/lib/cjs/components/upload/ImageUpload.d.ts

@@ -1,12 +1,13 @@
 import * as React from 'react';
-import { Props as FileUploadProps } from './FileUpload';
-export declare type Props = FileUploadProps & {
+import { DropzoneFile, Props as FileUploadProps } from './FileUpload';
+export declare type Props = Omit<FileUploadProps, 'multiple'> & {
     /** (Optional) Url for the image preview */
     imageUrl: string | null | undefined;
     imageSize?: 'contain' | 'cover';
 };
 declare type ImageUploadState = {
     dragOverPreview: boolean;
+    file: DropzoneFile | null;
 };
 /**
  * ImageUpload enables the possibility to upload images conveniently

package/lib/cjs/components/upload/ImageUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BlE,oBAAY,KAAK,GAAG,eAAe,GAAG;IACrC,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAErB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CAkBN"}
+{"version":3,"file":"ImageUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/upload/ImageUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAmB,EAAC,YAAY,EAAE,KAAK,IAAI,eAAe,EAAC,MAAM,cAAc,CAAC;AA+BhF,oBAAY,KAAK,GAAG,IAAI,CAAC,eAAe,EAAE,UAAU,CAAC,GAAG;IACvD,2CAA2C;IAC3C,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAChC,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACvB,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;CAC1B,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,KAAK,CAAC,SAAS,CAAC,KAAK,EAAE,gBAAgB,CAAC;IAChF,KAAK,EAAE,gBAAgB,CAGrB;IAEF,kBAAkB,CAAC,SAAS,EAAE,KAAK,GAAG,IAAI;IAQ1C,cAAc,EAAE,MAAM,IAAI,CAIxB;IAEF,MAAM;CA+BN"}

package/lib/cjs/components/upload/ImageUpload.js

@@ -45,7 +45,8 @@ class ImageUpload extends React.Component {
     constructor() {
         super(...arguments);
         this.state = {
-            dragOverPreview: false
+            dragOverPreview: false,
+            file: null
         };
         this.handleDragOver = () => {
             this.setState({
@@ -61,13 +62,19 @@ class ImageUpload extends React.Component {
         }
     }
     render() {
-        const { accept, imageUrl, imageSize, ...otherProps } = this.props;
-        const { dragOverPreview } = this.state;
-        if (imageUrl && !dragOverPreview) {
-            return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: otherProps.onRemoveFile, onDownloadFile: otherProps.onDownloadFile, onDragOver: this.handleDragOver }));
+        const { accept, imageUrl, imageSize, onSelectFile, onRemoveFile, ...otherProps } = this.props;
+        const { dragOverPreview, file } = this.state;
+        if (imageUrl && !dragOverPreview && file) {
+            return (React.createElement(PreviewImage, { url: imageUrl, imageSize: imageSize, onRemoveFile: () => onRemoveFile?.(file), onDownloadFile: () => otherProps.onDownloadFile?.(file), onDragOver: this.handleDragOver }));
         }
         else {
-            return React.createElement(FileUpload_1.default, { ...otherProps, accept: accept || 'image/jpeg, image/png' });
+            return (React.createElement(FileUpload_1.default, { ...otherProps, onRemoveFile: (file) => {
+                    this.setState({ file: null });
+                    onRemoveFile?.(file);
+                }, onSelectFile: (file) => {
+                    this.setState({ file });
+                    onSelectFile?.(file);
+                }, accept: accept || 'image/jpeg, image/png' }));
         }
     }
 }

package/lib/esm/assets/style.css

@@ -74,7 +74,7 @@
 .di.upload,
 .di.upload * {transition:all .1s ease;}
 .di.upload {margin:0; padding:0; width:100%; height:100%; min-height:80px; font-size:16px; border:1px dashed #888; border-radius:4px; overflow:hidden; user-select:none;}
-.di.upload {display:flex; align-items:center;}
+.di.upload {display:flex; flex-direction:column; align-items:center;}
 .di.upload:hover {border-color:#666;  background:#f9f9f9;}
 .di.upload:active {background:#eee;}
 .di.upload > div {width:100%; height:100%;}

package/lib/esm/components/input/DateTimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAejD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAwDP"}
+{"version":3,"file":"DateTimeInput.d.ts","sourceRoot":"","sources":["../../../../src/components/input/DateTimeInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAwBjD,oBAAY,KAAK,GAAG;IACnB,kDAAkD;IAClD,SAAS,EAAE,MAAM,CAAC;IAElB,oEAAoE;IACpE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,EAAE,aAAa,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7E,yDAAyD;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,OAAO,CAAC,EAAE,IAAI,CAAC;IAEf,mEAAmE;IACnE,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,0BAA0B;IAC1B,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EACrC,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAgB,EAChB,QAAQ,EACR,GAAG,UAAU,EACb,EAAE,KAAK,qBAgFP"}

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

@@ -1,7 +1,9 @@
+import dayjs from 'dayjs';
 import React, { useEffect, useState } from 'react';
 import { dayjsTz } from '../periodpicker/periods';
 import DateInput from './DateInput';
 import ValidatedTextInput from './ValidatedTextInput';
+import { toInteger } from 'lodash';
 const extractTime = (timezone, date) => {
     try {
         return dayjsTz(timezone, date).format('HH:mm');
@@ -11,6 +13,15 @@ const extractTime = (timezone, date) => {
         return '00:00';
     }
 };
+const extractDate = (timezone, date) => {
+    try {
+        return dayjs(dayjsTz(timezone, date).format('YYYY-MM-DD'));
+    }
+    catch (error) {
+        console.error('DateTimeInput: Error while extracting time from date', error);
+        return dayjs(new Date());
+    }
+};
 /**
  * Extends DateInput but also displaying the current time.
  * Usually the user's locale is used for displaying the correct date format.
@@ -23,17 +34,36 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
     }, [timezone, timestamp]);
     function handleChangeDate(date, fromTextField) {
         const oldDate = dayjsTz(timezone, timestamp);
-        onChange(dayjsTz(timezone, date).set('hour', oldDate.get('hour')).set('minute', oldDate.get('minute')).valueOf(), fromTextField);
+        const dateFix = dayjs(date);
+        let newDate = dayjsTz(timezone, date)
+            .set('day', dateFix.day())
+            .set('month', dateFix.month())
+            .set('year', dateFix.year())
+            .set('hour', toInteger(oldDate.hour()))
+            .set('minute', toInteger(oldDate.minute()));
+        const dstOffset = getLocalDstOffset(newDate);
+        newDate = newDate.subtract(dstOffset, 'minutes');
+        onChange(newDate.valueOf(), fromTextField);
+    }
+    function getMaxUtcOffset(year) {
+        const jan = new Date(`${year}-01-01`).getTimezoneOffset();
+        const jul = new Date(`${year}-07-01`).getTimezoneOffset();
+        return Math.min(jan, jul);
+    }
+    function getLocalDstOffset(newDate) {
+        return newDate.toDate().getTimezoneOffset() - getMaxUtcOffset(newDate.year());
     }
     function handleChangeTime(time, valid) {
         if (valid) {
             const [hours, minutes] = time.split(':');
-            onChange(dayjsTz(timezone, timestamp)
+            const date = extractDate(timezone, timestamp);
+            const dateTime = dayjsTz(timezone, timestamp)
+                .set('date', date.date())
                 .set('hour', parseInt(hours, 10))
                 .set('minute', parseInt(minutes, 10))
                 .set('second', 0)
-                .set('millisecond', 0)
-                .valueOf());
+                .set('millisecond', 0);
+            onChange(dateTime.valueOf());
         }
         setTime(time);
     }
@@ -43,7 +73,7 @@ export default function DateTimeInput({ timestamp, timezone, warning, readOnly =
         }
     }
     return (React.createElement("span", { className: `di date-time-input ${warning ? 'with-warning' : ''}` },
-        React.createElement(DateInput, { ...otherProps, value: timestamp, onChange: handleChangeDate, readOnly: readOnly }),
+        React.createElement(DateInput, { ...otherProps, value: extractDate(timezone, timestamp).valueOf(), onChange: handleChangeDate, readOnly: readOnly }),
         React.createElement(ValidatedTextInput, { "data-testid": "time-input", value: timeValue, onChange: handleChangeTime, pattern: /^(([01][0-9])|2[0-3]):[0-5][0-9]$/, required: true, invalidStyle: {
                 borderColor: 'red'
             }, placeholder: "00:00", className: "time", onBlur: tryFixTime, disabled: readOnly })));

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { describe, expect, it } from 'vitest';
 import DateTimeInput from '../DateTimeInput';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen } from '@testing-library/react';
+import { userEvent } from '@storybook/testing-library';
 describe('DateTimeInput.js', () => {
     it('should update time when timestamp has changed', () => {
         const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00').getTime(), onChange: () => { } }));
@@ -10,4 +11,24 @@ describe('DateTimeInput.js', () => {
         rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00').getTime(), onChange: () => { } }));
         expect(timeElement).toHaveDisplayValue('03:24');
     });
+    it('should display the time and date as timezone date', async () => {
+        const { rerender } = render(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-01T11:11:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        const timeElementUtm = screen.queryByDisplayValue('11:11');
+        expect(timeElementUtm).not.toBeInTheDocument();
+        const timeElement = screen.queryByDisplayValue('03:11');
+        expect(timeElement).toBeInTheDocument();
+        const dateElement = screen.queryByDisplayValue('01.02.2019');
+        expect(dateElement).toBeInTheDocument();
+        rerender(React.createElement(DateTimeInput, { timestamp: new Date('2019-02-02T03:24:00Z').getTime(), onChange: () => { }, timezone: "America/Vancouver" }));
+        expect(timeElement).toHaveDisplayValue('19:24');
+        expect(dateElement).toHaveDisplayValue('01.02.2019');
+        await act(async () => {
+            dateElement?.click();
+            timeElement?.click();
+            userEvent.clear(timeElement);
+            userEvent.type(timeElement, '10:24');
+        });
+        expect(timeElement).toHaveDisplayValue('10:24');
+        expect(dateElement).toHaveDisplayValue('01.02.2019');
+    });
 });

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,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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAwHd"}
+{"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,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,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,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,EAAE,SAAS,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,EAAE,EACxF,UAAU,EACV,aAAa,EACb,kBAAkB,EAClB,MAAM,EACN,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,MAAM,EACN,SAAS,EACT,gBAAgB,EAChB,aAAa,EAAE,MAAM,EACrB,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,qBAmId"}

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

@@ -10,7 +10,8 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
     const containerRef = useRef(null);
     const tableRef = useRef(null);
     const [showScrollingAdvice, setShowScrollingAdvice] = useState(false);
-    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(false);
+    const [neverShowScrollingAdvice, setNeverShowScrollingAdvice] = useState(true);
+    const [hasInitialized, setHasInitialized] = useState(false);
     const HIDE_SCROLLING_ADVICE_PATH = 'uiConfigurations/nevershowscrollingadvice';
     const neverShowScrollingAdviceRef = useRef(neverShowScrollingAdvice);
     useEffect(() => {
@@ -22,14 +23,25 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
         }
     };
     useEffect(() => {
-        readAccountObject(HIDE_SCROLLING_ADVICE_PATH).then((value) => {
-            const neverShow = value === undefined ? false : value;
-            setNeverShowScrollingAdvice(neverShow);
-            neverShowScrollingAdviceRef.current = neverShow;
-            if (containerRef.current && tableRef.current) {
-                updateScrollingAdvice();
-            }
-        });
+        setTimeout(() => {
+            (async () => {
+                try {
+                    const value = await readAccountObject(HIDE_SCROLLING_ADVICE_PATH);
+                    const neverShow = value === true;
+                    setNeverShowScrollingAdvice(neverShow);
+                    neverShowScrollingAdviceRef.current = neverShow;
+                    if (!neverShow) {
+                        updateScrollingAdvice();
+                    }
+                }
+                catch (error) {
+                    setNeverShowScrollingAdvice(false);
+                    neverShowScrollingAdviceRef.current = false;
+                    updateScrollingAdvice();
+                }
+                setHasInitialized(true);
+            })();
+        }, 0);
     }, []);
     useEffect(() => {
         updateScrollingAdvice();
@@ -39,7 +51,7 @@ export default function ReactableTable({ columnDefs, uniqueItemKey, paginationSe
     const showFilterRow = columnDefs.some((col) => col.filterable);
     return (React.createElement(SpinnerContainer, { show: isLoading },
         React.createElement("div", { ref: containerRef, className: "di reactable scroll-x" },
-            showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
+            hasInitialized && showScrollingAdvice && !isLoading && (React.createElement(Modal, { className: "scroll-horizontally-advice", content: React.createElement("div", null,
                     React.createElement(Trans, { i18nKey: "reactable.scrollHorizontally.advice" }, "SHIFT + mouse wheel to scroll horizontally"),
                     React.createElement("div", { className: "scroll-horizontally-advice-buttons" },
                         React.createElement(Button, { primary: true, onClick: async () => {