@dr.pogodin/react-utils 1.31.0 → 1.31.1

package/build/types-code/shared/components/Modal/index.d.ts

@@ -2,6 +2,7 @@ import { type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
 declare const validThemeKeys: readonly ["container", "overlay"];
 type PropsT = {
+    cancelOnScrolling?: boolean;
     children?: ReactNode;
     containerStyle?: React.CSSProperties;
     dontDisableScrolling?: boolean;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.31.0",
+  "version": "1.31.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,14 +8,14 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.0",
+    "@babel/runtime": "^7.24.1",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.9",
     "@dr.pogodin/react-global-state": "^0.13.0",
     "@dr.pogodin/react-themes": "^1.6.0",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.6.7",
+    "axios": "^1.6.8",
     "commander": "^12.0.0",
     "compression": "^1.7.4",
     "config": "^3.3.11",
@@ -23,7 +23,7 @@
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
-    "express": "^4.18.3",
+    "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
     "joi": "^17.12.2",
@@ -43,27 +43,27 @@
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^9.0.1",
-    "winston": "^3.12.0"
+    "winston": "^3.13.0"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.23.9",
-    "@babel/core": "^7.24.0",
-    "@babel/eslint-parser": "^7.23.10",
+    "@babel/cli": "^7.24.1",
+    "@babel/core": "^7.24.3",
+    "@babel/eslint-parser": "^7.24.1",
     "@babel/eslint-plugin": "^7.23.5",
     "@babel/node": "^7.23.9",
-    "@babel/plugin-transform-runtime": "^7.24.0",
-    "@babel/preset-env": "^7.24.0",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@babel/register": "^7.23.7",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@tsconfig/recommended": "^1.0.3",
-    "@tsd/typescript": "^5.3.3",
+    "@tsconfig/recommended": "^1.0.4",
+    "@tsd/typescript": "^5.4.3",
     "@types/compression": "^1.7.5",
-    "@types/config": "^3.3.3",
+    "@types/config": "^3.3.4",
     "@types/cookie": "^0.6.0",
     "@types/cookie-parser": "^1.4.7",
     "@types/csurf": "^1.11.5",
@@ -73,7 +73,7 @@
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^18.2.66",
+    "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.22",
     "@types/react-helmet": "^6.1.11",
     "@types/react-test-renderer": "^18.0.7",
@@ -83,11 +83,11 @@
     "@types/supertest": "^6.0.2",
     "@types/uuid": "^9.0.8",
     "@types/webpack": "^5.28.5",
-    "autoprefixer": "^10.4.18",
+    "autoprefixer": "^10.4.19",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.36.0",
+    "core-js": "^3.36.1",
     "css-loader": "^6.10.0",
     "css-minimizer-webpack-plugin": "^6.0.0",
     "eslint": "^8.57.0",
@@ -97,16 +97,16 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^27.9.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-react": "^7.34.0",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "memfs": "^4.7.7",
+    "memfs": "^4.8.0",
     "mini-css-extract-plugin": "^2.8.1",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
-    "postcss": "^8.4.35",
+    "postcss": "^8.4.38",
     "postcss-loader": "^8.1.1",
     "postcss-scss": "^4.0.9",
     "pretty": "^2.0.0",
@@ -117,15 +117,15 @@
     "sass": "^1.72.0",
     "sass-loader": "^14.1.1",
     "sitemap": "^7.1.1",
-    "stylelint": "^16.2.1",
+    "stylelint": "^16.3.0",
     "stylelint-config-standard-scss": "^13.0.0",
     "supertest": "^6.3.4",
     "tsc-alias": "^1.8.8",
-    "typed-scss-modules": "^8.0.0",
-    "typescript": "^5.4.2",
-    "typescript-eslint": "^7.2.0",
-    "webpack": "^5.90.3",
-    "webpack-dev-middleware": "^7.0.0",
+    "typed-scss-modules": "^8.0.1",
+    "typescript": "^5.4.3",
+    "typescript-eslint": "^7.4.0",
+    "webpack": "^5.91.0",
+    "webpack-dev-middleware": "^7.1.1",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^5.10.0",
     "workbox-core": "^7.0.0",

package/src/shared/components/Modal/index.tsx

@@ -20,6 +20,7 @@ import S from './styles.scss';
 const validThemeKeys = ['container', 'overlay'] as const;
 
 type PropsT = {
+  cancelOnScrolling?: boolean;
   children?: ReactNode;
   containerStyle?: React.CSSProperties;
   dontDisableScrolling?: boolean;
@@ -39,6 +40,7 @@ type PropsT = {
  * @param {ModalTheme} [props.theme] _Ad hoc_ theme.
  */
 const BaseModal: React.FunctionComponent<PropsT> = ({
+  cancelOnScrolling,
   children,
   containerStyle,
   dontDisableScrolling,
@@ -58,6 +60,18 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
     };
   }, []);
 
+  // Sets up modal cancellation of scrolling, if opted-in.
+  useEffect(() => {
+    if (cancelOnScrolling && onCancel) {
+      window.addEventListener('scroll', onCancel);
+    }
+    return () => {
+      if (cancelOnScrolling && onCancel) {
+        window.removeEventListener('scroll', onCancel);
+      }
+    };
+  }, [cancelOnScrolling, onCancel]);
+
   // Disables window scrolling, if it is not opted-out.
   useEffect(() => {
     if (!dontDisableScrolling) {
@@ -139,6 +153,7 @@ const ThemedModal = themed(
 );
 
 BaseModal.propTypes = {
+  cancelOnScrolling: PT.bool,
   children: PT.node,
   containerStyle: PT.shape({}),
   dontDisableScrolling: PT.bool,
@@ -147,6 +162,7 @@ BaseModal.propTypes = {
 };
 
 BaseModal.defaultProps = {
+  cancelOnScrolling: false,
   children: null,
   containerStyle: undefined,
   dontDisableScrolling: false,

package/src/shared/components/selectors/CustomDropdown/Options/index.tsx

@@ -1,5 +1,4 @@
 import PT from 'prop-types';
-import { useEffect } from 'react';
 
 import { BaseModal } from 'components/Modal';
 
@@ -35,21 +34,6 @@ const Options: React.FunctionComponent<PropsT> = ({
   optionClass,
   options,
 }) => {
-  // Closes the dropdown (cancels the selection) on any page scrolling attempt.
-  // This is the same native <select> elements do on scrolling, and at least for
-  // now we have no reason to deal with complications needed to support open
-  // dropdowns during the scrolling (that would need to re-position it in
-  // response to the position changes of the root dropdown element).
-  useEffect(() => {
-    const listener = () => {
-      onCancel();
-    };
-    window.addEventListener('scroll', listener);
-    return () => {
-      window.removeEventListener('scroll', listener);
-    };
-  }, [onCancel]);
-
   const optionNodes: React.ReactNode[] = [];
   for (let i = 0; i < options.length; ++i) {
     const option = options[i];
@@ -76,6 +60,12 @@ const Options: React.FunctionComponent<PropsT> = ({
 
   return (
     <BaseModal
+      // Closes the dropdown (cancels the selection) on any page scrolling attempt.
+      // This is the same native <select> elements do on scrolling, and at least for
+      // now we have no reason to deal with complications needed to support open
+      // dropdowns during the scrolling (that would need to re-position it in
+      // response to the position changes of the root dropdown element).
+      cancelOnScrolling
       containerStyle={{
         left: anchorRect.left,
         top: anchorRect.bottom,

package/src/shared/utils/jest/E2eSsrEnv.ts

@@ -87,7 +87,11 @@ export default class E2eSsrEnv extends JsdomEnv {
     this.loadWebpackConfig();
 
     const compiler = webpack(this.global.webpackConfig as webpack.Configuration);
-    compiler.outputFileSystem = this.global.webpackOutputFs;
+
+    // TODO: The "as typeof compiler.outputFileSystem" piece below is a workaround
+    // for the Webpack regression: https://github.com/webpack/webpack/issues/18242
+    compiler.outputFileSystem = this.global.webpackOutputFs as typeof compiler.outputFileSystem;
+
     return new Promise<void>((done, fail) => {
       compiler.run((err, stats) => {
         if (err) fail(err);