@bigbinary/neeto-commons-frontend 4.13.93 → 4.13.94

package/README.md

@@ -64,6 +64,7 @@ React utilities [↗](./docs/react/README.md)
 - [useMutationWithInvalidation](./docs/react/hooks/useMutationWithInvalidation.md)
 - [useFetchNeetoApps](./docs/react/hooks/useFetchNeetoApps.md)
 - [usePersistedQuery](./docs/react/hooks/usePersistedQuery.md)
+- [usePrefersReducedMotion](./docs/react/hooks/usePrefersReducedMotion.md)
 - [useIsElementVisibleInDom](./docs/react/hooks/useIsElementVisibleInDom.md)
 - [useStateWithDependency](./docs/react/hooks/useStateWithDependency.md)
 - [useQueryParams](./docs/react/hooks/useQueryParams.md)

package/dist/cjs/react-utils/index.js

@@ -15,6 +15,7 @@ var reactUtils_useMutationWithInvalidation_useMutationWithInvalidation = require
 var reactUtils_useOnClickOutside_useOnClickOutside = require('./useOnClickOutside/useOnClickOutside.js');
 var reactUtils_usePersistedQuery_usePersistedQuery = require('./usePersistedQuery/usePersistedQuery.js');
 var reactUtils_usePrevious_usePrevious = require('./usePrevious/usePrevious.js');
+var reactUtils_usePrefersReducedMotion_usePrefersReducedMotion = require('./usePrefersReducedMotion/usePrefersReducedMotion.js');
 var reactUtils_useQueryParams_useQueryParams = require('./useQueryParams/useQueryParams.js');
 var reactUtils_useRegisterNavigationCheckpoint_useRegisterNavigationCheckpoint = require('./useRegisterNavigationCheckpoint/useRegisterNavigationCheckpoint.js');
 var reactUtils_useStateWithDependency_useStateWithDependency = require('./useStateWithDependency/useStateWithDependency.js');
@@ -79,6 +80,7 @@ require('../lodash-yQg9l0eZ.js');
 require('@bigbinary/neeto-time-zones');
 require('ua-parser-js');
 require('@tanstack/react-query');
+require('./usePrefersReducedMotion/constants.js');
 require('./useBreakpoints/utils.js');
 require('./useColumnConfig/useConfigApi.js');
 require('./useColumnConfig/api.js');
@@ -113,6 +115,7 @@ exports.useMutationWithInvalidation = reactUtils_useMutationWithInvalidation_use
 exports.useOnClickOutside = reactUtils_useOnClickOutside_useOnClickOutside;
 exports.usePersistedQuery = reactUtils_usePersistedQuery_usePersistedQuery;
 exports.usePrevious = reactUtils_usePrevious_usePrevious;
+exports.usePrefersReducedMotion = reactUtils_usePrefersReducedMotion_usePrefersReducedMotion;
 exports.useQueryParams = reactUtils_useQueryParams_useQueryParams;
 exports.useNavigationCheckpoints = reactUtils_useRegisterNavigationCheckpoint_useRegisterNavigationCheckpoint.useNavigationCheckpoints;
 exports.useRegisterNavigationCheckpoint = reactUtils_useRegisterNavigationCheckpoint_useRegisterNavigationCheckpoint.default;

package/dist/cjs/react-utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/react-utils/usePrefersReducedMotion/constants.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var QUERY = "(prefers-reduced-motion: no-preference)";
+
+exports.QUERY = QUERY;
+//# sourceMappingURL=constants.js.map

package/dist/cjs/react-utils/usePrefersReducedMotion/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../../src/react-utils/usePrefersReducedMotion/constants.js"],"sourcesContent":["export const QUERY = \"(prefers-reduced-motion: no-preference)\";\n"],"names":["QUERY"],"mappings":";;AAAO,IAAMA,KAAK,GAAG;;;;"}

package/dist/cjs/react-utils/usePrefersReducedMotion/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+var reactUtils_usePrefersReducedMotion_usePrefersReducedMotion = require('./usePrefersReducedMotion.js');
+require('../../slicedToArray-BcL7fKuL.js');
+require('../../unsupportedIterableToArray-BoHMiKNA.js');
+require('react');
+require('./constants.js');
+
+
+
+module.exports = reactUtils_usePrefersReducedMotion_usePrefersReducedMotion;
+//# sourceMappingURL=index.js.map

package/dist/cjs/react-utils/usePrefersReducedMotion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/cjs/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js

@@ -0,0 +1,46 @@
+'use strict';
+
+var slicedToArray = require('../../slicedToArray-BcL7fKuL.js');
+var React = require('react');
+var reactUtils_usePrefersReducedMotion_constants = require('./constants.js');
+require('../../unsupportedIterableToArray-BoHMiKNA.js');
+
+var isRenderingOnServer = typeof window === "undefined";
+var getInitialState = function getInitialState() {
+  return (
+    // For our initial server render, we won't know if the user
+    // prefers reduced motion, but it doesn't matter. This value
+    // will be overwritten on the client, before any animations
+    // occur.
+    isRenderingOnServer ? true : !window.matchMedia(reactUtils_usePrefersReducedMotion_constants.QUERY).matches
+  );
+};
+var usePrefersReducedMotion = function usePrefersReducedMotion() {
+  var _useState = React.useState(getInitialState),
+    _useState2 = slicedToArray._slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  React.useEffect(function () {
+    if (isRenderingOnServer) return undefined;
+    var mediaQueryList = window.matchMedia(reactUtils_usePrefersReducedMotion_constants.QUERY);
+    var listener = function listener(event) {
+      setPrefersReducedMotion(!event.matches);
+    };
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+    return function () {
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+
+module.exports = usePrefersReducedMotion;
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/cjs/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.js","sources":["../../../../src/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nimport { QUERY } from \"./constants\";\n\nconst isRenderingOnServer = typeof window === \"undefined\";\n\nconst getInitialState = () =>\n  // For our initial server render, we won't know if the user\n  // prefers reduced motion, but it doesn't matter. This value\n  // will be overwritten on the client, before any animations\n  // occur.\n  isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;\n\nconst usePrefersReducedMotion = () => {\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    useState(getInitialState);\n\n  useEffect(() => {\n    if (isRenderingOnServer) return undefined;\n\n    const mediaQueryList = window.matchMedia(QUERY);\n\n    const listener = event => {\n      setPrefersReducedMotion(!event.matches);\n    };\n\n    if (mediaQueryList.addEventListener) {\n      mediaQueryList.addEventListener(\"change\", listener);\n    } else {\n      mediaQueryList.addListener(listener);\n    }\n\n    return () => {\n      if (mediaQueryList.removeEventListener) {\n        mediaQueryList.removeEventListener(\"change\", listener);\n      } else {\n        mediaQueryList.removeListener(listener);\n      }\n    };\n  }, []);\n\n  return prefersReducedMotion;\n};\n\nexport default usePrefersReducedMotion;\n"],"names":["isRenderingOnServer","window","getInitialState","matchMedia","QUERY","matches","usePrefersReducedMotion","_useState","useState","_useState2","_slicedToArray","prefersReducedMotion","setPrefersReducedMotion","useEffect","undefined","mediaQueryList","listener","event","addEventListener","addListener","removeEventListener","removeListener"],"mappings":";;;;;;;AAIA,IAAMA,mBAAmB,GAAG,OAAOC,MAAM,KAAK,WAAW;AAEzD,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,GAAA;AAAA,EAAA;AACnB;AACA;AACA;AACA;IACAF,mBAAmB,GAAG,IAAI,GAAG,CAACC,MAAM,CAACE,UAAU,CAACC,kDAAK,CAAC,CAACC;AAAO;AAAA,CAAA;AAEhE,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,GAAS;AACpC,EAAA,IAAAC,SAAA,GACEC,cAAQ,CAACN,eAAe,CAAC;IAAAO,UAAA,GAAAC,4BAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AADpBI,IAAAA,oBAAoB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,uBAAuB,GAAAH,UAAA,CAAA,CAAA,CAAA;AAGpDI,EAAAA,eAAS,CAAC,YAAM;IACd,IAAIb,mBAAmB,EAAE,OAAOc,SAAS;AAEzC,IAAA,IAAMC,cAAc,GAAGd,MAAM,CAACE,UAAU,CAACC,kDAAK,CAAC;AAE/C,IAAA,IAAMY,QAAQ,GAAG,SAAXA,QAAQA,CAAGC,KAAK,EAAI;AACxBL,MAAAA,uBAAuB,CAAC,CAACK,KAAK,CAACZ,OAAO,CAAC;KACxC;IAED,IAAIU,cAAc,CAACG,gBAAgB,EAAE;AACnCH,MAAAA,cAAc,CAACG,gBAAgB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;AACrD,KAAC,MAAM;AACLD,MAAAA,cAAc,CAACI,WAAW,CAACH,QAAQ,CAAC;AACtC;AAEA,IAAA,OAAO,YAAM;MACX,IAAID,cAAc,CAACK,mBAAmB,EAAE;AACtCL,QAAAA,cAAc,CAACK,mBAAmB,CAAC,QAAQ,EAAEJ,QAAQ,CAAC;AACxD,OAAC,MAAM;AACLD,QAAAA,cAAc,CAACM,cAAc,CAACL,QAAQ,CAAC;AACzC;KACD;GACF,EAAE,EAAE,CAAC;AAEN,EAAA,OAAOL,oBAAoB;AAC7B;;;;"}

package/dist/react-utils/index.js

@@ -13,6 +13,7 @@ export { default as useMutationWithInvalidation } from './useMutationWithInvalid
 export { default as useOnClickOutside } from './useOnClickOutside/useOnClickOutside.js';
 export { default as usePersistedQuery } from './usePersistedQuery/usePersistedQuery.js';
 export { default as usePrevious } from './usePrevious/usePrevious.js';
+export { default as usePrefersReducedMotion } from './usePrefersReducedMotion/usePrefersReducedMotion.js';
 export { default as useQueryParams } from './useQueryParams/useQueryParams.js';
 export { useNavigationCheckpoints, default as useRegisterNavigationCheckpoint, useRemoveNavigationCheckpoint } from './useRegisterNavigationCheckpoint/useRegisterNavigationCheckpoint.js';
 export { default as useStateWithDependency } from './useStateWithDependency/useStateWithDependency.js';
@@ -77,6 +78,7 @@ import '../lodash-M8VRFvKw.js';
 import '@bigbinary/neeto-time-zones';
 import 'ua-parser-js';
 import '@tanstack/react-query';
+import './usePrefersReducedMotion/constants.js';
 import './useBreakpoints/utils.js';
 import './useColumnConfig/useConfigApi.js';
 import './useColumnConfig/api.js';

package/dist/react-utils/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/react-utils/usePrefersReducedMotion/constants.js

@@ -0,0 +1,4 @@
+var QUERY = "(prefers-reduced-motion: no-preference)";
+
+export { QUERY };
+//# sourceMappingURL=constants.js.map

package/dist/react-utils/usePrefersReducedMotion/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/react-utils/usePrefersReducedMotion/constants.js"],"sourcesContent":["export const QUERY = \"(prefers-reduced-motion: no-preference)\";\n"],"names":["QUERY"],"mappings":"AAAO,IAAMA,KAAK,GAAG;;;;"}

package/dist/react-utils/usePrefersReducedMotion/index.js

@@ -0,0 +1,6 @@
+export { default } from './usePrefersReducedMotion.js';
+import '../../slicedToArray-DmsZvA_9.js';
+import '../../unsupportedIterableToArray-Dqz8Y8_I.js';
+import 'react';
+import './constants.js';
+//# sourceMappingURL=index.js.map

package/dist/react-utils/usePrefersReducedMotion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js

@@ -0,0 +1,44 @@
+import { _ as _slicedToArray } from '../../slicedToArray-DmsZvA_9.js';
+import { useState, useEffect } from 'react';
+import { QUERY } from './constants.js';
+import '../../unsupportedIterableToArray-Dqz8Y8_I.js';
+
+var isRenderingOnServer = typeof window === "undefined";
+var getInitialState = function getInitialState() {
+  return (
+    // For our initial server render, we won't know if the user
+    // prefers reduced motion, but it doesn't matter. This value
+    // will be overwritten on the client, before any animations
+    // occur.
+    isRenderingOnServer ? true : !window.matchMedia(QUERY).matches
+  );
+};
+var usePrefersReducedMotion = function usePrefersReducedMotion() {
+  var _useState = useState(getInitialState),
+    _useState2 = _slicedToArray(_useState, 2),
+    prefersReducedMotion = _useState2[0],
+    setPrefersReducedMotion = _useState2[1];
+  useEffect(function () {
+    if (isRenderingOnServer) return undefined;
+    var mediaQueryList = window.matchMedia(QUERY);
+    var listener = function listener(event) {
+      setPrefersReducedMotion(!event.matches);
+    };
+    if (mediaQueryList.addEventListener) {
+      mediaQueryList.addEventListener("change", listener);
+    } else {
+      mediaQueryList.addListener(listener);
+    }
+    return function () {
+      if (mediaQueryList.removeEventListener) {
+        mediaQueryList.removeEventListener("change", listener);
+      } else {
+        mediaQueryList.removeListener(listener);
+      }
+    };
+  }, []);
+  return prefersReducedMotion;
+};
+
+export { usePrefersReducedMotion as default };
+//# sourceMappingURL=usePrefersReducedMotion.js.map

package/dist/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefersReducedMotion.js","sources":["../../../src/react-utils/usePrefersReducedMotion/usePrefersReducedMotion.js"],"sourcesContent":["import { useState, useEffect } from \"react\";\n\nimport { QUERY } from \"./constants\";\n\nconst isRenderingOnServer = typeof window === \"undefined\";\n\nconst getInitialState = () =>\n  // For our initial server render, we won't know if the user\n  // prefers reduced motion, but it doesn't matter. This value\n  // will be overwritten on the client, before any animations\n  // occur.\n  isRenderingOnServer ? true : !window.matchMedia(QUERY).matches;\n\nconst usePrefersReducedMotion = () => {\n  const [prefersReducedMotion, setPrefersReducedMotion] =\n    useState(getInitialState);\n\n  useEffect(() => {\n    if (isRenderingOnServer) return undefined;\n\n    const mediaQueryList = window.matchMedia(QUERY);\n\n    const listener = event => {\n      setPrefersReducedMotion(!event.matches);\n    };\n\n    if (mediaQueryList.addEventListener) {\n      mediaQueryList.addEventListener(\"change\", listener);\n    } else {\n      mediaQueryList.addListener(listener);\n    }\n\n    return () => {\n      if (mediaQueryList.removeEventListener) {\n        mediaQueryList.removeEventListener(\"change\", listener);\n      } else {\n        mediaQueryList.removeListener(listener);\n      }\n    };\n  }, []);\n\n  return prefersReducedMotion;\n};\n\nexport default usePrefersReducedMotion;\n"],"names":["isRenderingOnServer","window","getInitialState","matchMedia","QUERY","matches","usePrefersReducedMotion","_useState","useState","_useState2","_slicedToArray","prefersReducedMotion","setPrefersReducedMotion","useEffect","undefined","mediaQueryList","listener","event","addEventListener","addListener","removeEventListener","removeListener"],"mappings":";;;;;AAIA,IAAMA,mBAAmB,GAAG,OAAOC,MAAM,KAAK,WAAW;AAEzD,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,GAAA;AAAA,EAAA;AACnB;AACA;AACA;AACA;IACAF,mBAAmB,GAAG,IAAI,GAAG,CAACC,MAAM,CAACE,UAAU,CAACC,KAAK,CAAC,CAACC;AAAO;AAAA,CAAA;AAEhE,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,GAAS;AACpC,EAAA,IAAAC,SAAA,GACEC,QAAQ,CAACN,eAAe,CAAC;IAAAO,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AADpBI,IAAAA,oBAAoB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,uBAAuB,GAAAH,UAAA,CAAA,CAAA,CAAA;AAGpDI,EAAAA,SAAS,CAAC,YAAM;IACd,IAAIb,mBAAmB,EAAE,OAAOc,SAAS;AAEzC,IAAA,IAAMC,cAAc,GAAGd,MAAM,CAACE,UAAU,CAACC,KAAK,CAAC;AAE/C,IAAA,IAAMY,QAAQ,GAAG,SAAXA,QAAQA,CAAGC,KAAK,EAAI;AACxBL,MAAAA,uBAAuB,CAAC,CAACK,KAAK,CAACZ,OAAO,CAAC;KACxC;IAED,IAAIU,cAAc,CAACG,gBAAgB,EAAE;AACnCH,MAAAA,cAAc,CAACG,gBAAgB,CAAC,QAAQ,EAAEF,QAAQ,CAAC;AACrD,KAAC,MAAM;AACLD,MAAAA,cAAc,CAACI,WAAW,CAACH,QAAQ,CAAC;AACtC;AAEA,IAAA,OAAO,YAAM;MACX,IAAID,cAAc,CAACK,mBAAmB,EAAE;AACtCL,QAAAA,cAAc,CAACK,mBAAmB,CAAC,QAAQ,EAAEJ,QAAQ,CAAC;AACxD,OAAC,MAAM;AACLD,QAAAA,cAAc,CAACM,cAAc,CAACL,QAAQ,CAAC;AACzC;KACD;GACF,EAAE,EAAE,CAAC;AAEN,EAAA,OAAOL,oBAAoB;AAC7B;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-commons-frontend",
-  "version": "4.13.93",
+  "version": "4.13.94",
   "description": "A package encapsulating common code across neeto projects including initializers, utility functions, common components and hooks and so on.",
   "repository": "git@github.com:bigbinary/neeto-commons-frontend.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/react-utils.d.ts

@@ -527,6 +527,71 @@ export function useOnClickOutside<T>(ref: React.MutableRefObject<T>, handler: (e
  *
 */
 export function usePrevious<T>(value: T): T;
+/**
+ *
+ * The usePrefersReducedMotion hook is a utility that detects whether the user has
+ *
+ * preferred reduced motion enabled in their system settings. This is particularly
+ *
+ * useful for creating accessible user interfaces that respect user preferences for
+ *
+ * motion and animations. The hook listens to changes in the user's motion
+ *
+ * preferences and updates accordingly.
+ *
+ * This hook uses the CSS media query (prefers-reduced-motion: no-preference) to
+ *
+ * determine if the user prefers reduced motion. When the user has reduced motion
+ *
+ * enabled, the media query will not match, and the hook will return true.
+ *
+ * This hook does not accept any arguments.
+ *
+ * The following code snippet demonstrates the usage of usePrefersReducedMotion to
+ *
+ * conditionally apply animations based on user preferences.
+ *
+ * @example 
+ *
+ * import { usePrefersReducedMotion } from "@bigbinary/neeto-commons-frontend/react-utils";
+ * 
+ * const MyComponent = () => {
+ *   const prefersReducedMotion = usePrefersReducedMotion();
+ * 
+ *   return (
+ *     <div
+ *       className={prefersReducedMotion ? "static" : "animate-fade-in"}
+ *     >
+ *       Content that respects motion preferences
+ *     </div>
+ *   );
+ * };
+ * @endexample
+ * You can also use this hook to conditionally render animation libraries or
+ *
+ * components:
+ *
+ * @example 
+ *
+ * import { usePrefersReducedMotion } from "@bigbinary/neeto-commons-frontend/react-utils";
+ * import { motion } from "framer-motion";
+ * 
+ * const AnimatedComponent = ({ children }) => {
+ *   const prefersReducedMotion = usePrefersReducedMotion();
+ * 
+ *   return (
+ *     <motion.div
+ *       initial={{ opacity: 0 }}
+ *       animate={{ opacity: 1 }}
+ *       transition={{ duration: prefersReducedMotion ? 0 : 0.5 }}
+ *     >
+ *       {children}
+ *     </motion.div>
+ *   );
+ * };
+ * @endexample
+*/
+export function usePrefersReducedMotion(): boolean;
 /**
  *
  * The useUpdateEffect hook is a variation of the standard useEffect hook in