tp-react-elements 2.0.4 → 2.0.7

package/dist/components/SessionTimeOut/SessionTimeOut.esm.js

@@ -1,62 +1,61 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { useIdleTimer } from 'react-idle-timer';
 import ConfirmationDialog from '../ModalField/ConfirmationDialog.esm.js';
 
 const secondsToMMSS = (totalSeconds) => {
     const minutes = Math.floor(totalSeconds / 60);
     const seconds = Math.floor(totalSeconds % 60);
-    const formattedMinutes = String(minutes).padStart(2, '0');
-    const formattedSeconds = String(seconds).padStart(2, '0');
-    return `${formattedMinutes}:${formattedSeconds}`;
+    return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
 };
 const promptBeforeValue = 120000;
 const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, handleSessionCancel, SubmitButtonName = 'Submit', }) => {
     const [openConfirmModal, setOpenConfirmModal] = useState(false);
-    const expiryDetails = sessionTime;
-    const providedTimestamp = new Date(expiryDetails).getTime();
+    const providedTimestamp = new Date(sessionTime).getTime();
     const currentTimestamp = new Date().getTime();
-    const remainingTime = providedTimestamp - currentTimestamp;
-    const timeout = remainingTime;
+    const timeout = providedTimestamp - currentTimestamp;
     const promptBeforeIdle = Math.min(promptBeforeValue, timeout - 1000);
     const [, setRemainingTimeInSeconds] = useState(Math.ceil(timeout / 1000));
     const [formattedRemainingTime, setFormattedRemainingTime] = useState(secondsToMMSS(Math.ceil(timeout / 1000)));
-    const onIdle = () => {
-        if (sessionTime) {
+    const onIdle = useCallback(() => {
+        if (sessionTime)
             onSessionExpire();
-        }
-    };
-    const handleSubmit = () => {
-        handleSubmitSession();
-        setOpenConfirmModal(false);
-    };
-    const handleCancel = () => {
-        handleSessionCancel();
-        setOpenConfirmModal(false);
-    };
-    const onPrompt = () => {
+    }, [sessionTime, onSessionExpire]);
+    const onPrompt = useCallback(() => {
         setOpenConfirmModal(true);
-    };
+    }, []);
     const { getRemainingTime } = useIdleTimer({
         onIdle,
         onPrompt,
         promptBeforeIdle,
         timeout,
-        throttle: 1000, // Adjust throttle to reduce delays
+        throttle: 1000,
     });
+    // Keep a ref to getRemainingTime so the interval effect never needs it
+    // as a reactive dependency — react-idle-timer guarantees it is stable,
+    // but ESLint cannot verify that, which previously caused a spurious
+    // re-subscription on every render.
+    const getRemainingTimeRef = useRef(getRemainingTime);
+    getRemainingTimeRef.current = getRemainingTime;
     useEffect(() => {
         const interval = setInterval(() => {
-            const remainingSeconds = Math.ceil(getRemainingTime() / 1000);
-            setRemainingTimeInSeconds(promptBeforeIdle !== promptBeforeValue ? remainingSeconds : 0);
-            const formattedTime = secondsToMMSS(remainingSeconds);
-            setFormattedRemainingTime(promptBeforeIdle !== promptBeforeValue ? formattedTime : '00:00');
-        }, 1000); // Adjust interval to 1000 ms
-        return () => {
-            clearInterval(interval);
-        };
-    }, [promptBeforeIdle, getRemainingTime]);
+            const remainingSeconds = Math.ceil(getRemainingTimeRef.current() / 1000);
+            const show = promptBeforeIdle !== promptBeforeValue;
+            setRemainingTimeInSeconds(show ? remainingSeconds : 0);
+            setFormattedRemainingTime(show ? secondsToMMSS(remainingSeconds) : '00:00');
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [promptBeforeIdle]); // getRemainingTime intentionally omitted — stable ref used instead
+    const handleSubmit = useCallback(() => {
+        handleSubmitSession();
+        setOpenConfirmModal(false);
+    }, [handleSubmitSession]);
+    const handleCancel = useCallback(() => {
+        handleSessionCancel();
+        setOpenConfirmModal(false);
+    }, [handleSessionCancel]);
     const sessionMessage = `Your session will expire in ${formattedRemainingTime} seconds. Do you want to extend the session?`;
-    return (jsx(Fragment, { children: jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName }) }));
+    return (jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName }));
 };
 
 export { SessionTimeOut as default };

package/dist/node_modules/react-date-range/dist/components/Calendar/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Calendar } from '../../../../../_virtual/index.esm6.js';
+import { __exports as Calendar } from '../../../../../_virtual/index.esm7.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateInput/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateInput } from '../../../../../_virtual/index.esm13.js';
+import { __exports as DateInput } from '../../../../../_virtual/index.esm14.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRange/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRange } from '../../../../../_virtual/index.esm4.js';
+import { __exports as DateRange } from '../../../../../_virtual/index.esm6.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireCalendar } from '../Calendar/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DateRangePicker/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm7.js';
+import { __exports as DateRangePicker } from '../../../../../_virtual/index.esm4.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDateRange } from '../DateRange/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/DayCell/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as DayCell } from '../../../../../_virtual/index.esm11.js';
+import { __exports as DayCell } from '../../../../../_virtual/index.esm12.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireClassnames } from '../../../../classnames/index.esm.js';

package/dist/node_modules/react-date-range/dist/components/InputRangeField/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as InputRangeField } from '../../../../../_virtual/index.esm14.js';
+import { __exports as InputRangeField } from '../../../../../_virtual/index.esm11.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 

package/dist/node_modules/react-date-range/dist/components/Month/index.esm.js

@@ -1,4 +1,4 @@
-import { __exports as Month } from '../../../../../_virtual/index.esm12.js';
+import { __exports as Month } from '../../../../../_virtual/index.esm13.js';
 import React__default from 'react';
 import { __require as requirePropTypes } from '../../../../prop-types/index.esm.js';
 import { __require as requireDayCell } from '../DayCell/index.esm.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tp-react-elements",
-  "version": "2.0.4",
+  "version": "2.0.7",
   "private": false,
   "type": "module",
   "description": "React form components library built with React Hook Form and Yup",