@capsitech/react-utilities 0.1.11 → 0.1.12

package/lib/Utilities/BrowserInfo.d.ts

@@ -47,7 +47,7 @@ export declare const getScreenScalingFactor: () => number | null;
  * If it fails validation, it returns null
  * @returns {number | null} validated value of screen's colorDepth
  */
-export declare const getScreenColourDepth: () => number | null;
+export declare const getScreenColorDepth: () => number | null;
 /**
  * Function that validates the user's window's interior width in pixels, and then returns it.
  * If it fails validation, it returns null

package/lib/Utilities/BrowserInfo.js

@@ -118,19 +118,25 @@ export const getScreenScalingFactor = () => validateAndGetScreenDetail(window.de
  * If it fails validation, it returns null
  * @returns {number | null} validated value of screen's colorDepth
  */
-export const getScreenColourDepth = () => validateAndGetScreenDetail(screen.colorDepth);
+export const getScreenColorDepth = () => validateAndGetScreenDetail(screen.colorDepth);
 /**
  * Function that validates the user's window's interior width in pixels, and then returns it.
  * If it fails validation, it returns null
  * @returns {number | null} validated value of window's innerWidth
  */
-export const getWindowWidth = () => validateAndGetScreenDetail(window.innerWidth);
+export const getWindowWidth = () => {
+    const pixelRatio = window.devicePixelRatio || 1;
+    return validateAndGetScreenDetail(Math.floor(window.innerWidth * pixelRatio));
+};
 /**
  * Function that validates the user's window's interior height in pixels, and then returns it.
  * If it fails validation, it returns null
  * @returns {number | null} validated value of window's innerHeight
  */
-export const getWindowHeight = () => validateAndGetScreenDetail(window.innerHeight);
+export const getWindowHeight = () => {
+    const pixelRatio = window.devicePixelRatio || 1;
+    return validateAndGetScreenDetail(Math.floor(window.innerHeight * pixelRatio));
+};
 /**
  * The function returns users browser's do not track setting by checking the navigator
  * and window object for the same

package/lib/Utilities/MTDFraudPrevention.js

@@ -1,4 +1,4 @@
-import { getScreenColourDepth, getScreenHeight, getScreenScalingFactor, getScreenWidth, getTimezone, getWindowHeight, getWindowWidth } from './BrowserInfo';
+import { getScreenColorDepth, getScreenHeight, getScreenScalingFactor, getScreenWidth, getTimezone, getWindowHeight, getWindowWidth } from './BrowserInfo';
 /**
  * Enum object of keys for each header in the Map returned by getFraudPreventionHeaders().headers
  */
@@ -14,14 +14,14 @@ export const fraudPreventionHeadersEnum = {
     //BROWSER_USER_AGENT: 'Gov-Client-Browser-JS-User-Agent',
 };
 const getScreenData = () => {
-    const screenDetails = `width=${getScreenWidth()}&height=${getScreenHeight()}&scaling-factor=${getScreenScalingFactor()}&colour-depth=${getScreenColourDepth()}`;
+    const screenDetails = `width=${getScreenWidth()}&height=${getScreenHeight()}&scaling-factor=${getScreenScalingFactor()}&colour-depth=${getScreenColorDepth()}`;
     return encodeURI(screenDetails);
 };
 export const getScreenDetails = () => {
     return {
         width: getScreenWidth(),
         height: getScreenHeight(),
-        colorDepth: getScreenColourDepth(),
+        colorDepth: getScreenColorDepth(),
         scalingFactor: getScreenScalingFactor(),
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capsitech/react-utilities",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "A set of javascript utility methods",
   "main": "lib/index.js",
   "jsnext:main": "lib/index.js",
@@ -47,9 +47,12 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
-    "@storybook/addon-docs": "^9.1.2",
-    "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
-    "@storybook/react-webpack5": "^9.1.2",
+    "@babel/preset-env": "7.28.5",
+    "@babel/preset-react": "7.28.5",
+    "@babel/preset-typescript": "7.28.5",
+    "@storybook/addon-docs": "^10.1.11",
+    "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
+    "@storybook/react-webpack5": "^10.1.11",
     "@types/file-saver": "^2.0.7",
     "@types/lodash": "4.17.20",
     "@types/qs": "^6",
@@ -61,7 +64,7 @@
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.8.1",
     "rimraf": "6.0.1",
-    "storybook": "^9.1.2",
+    "storybook": "^10.1.11",
     "typescript": "5.8.3"
   },
   "browserslist": {