@dr.pogodin/react-utils 1.39.0 → 1.39.1

package/build/types-code/shared/components/selectors/common.d.ts

@@ -10,7 +10,7 @@ export type PropsT<NameT, OnChangeT = React.ChangeEventHandler<HTMLSelectElement
     filter?: (item: OptionT<NameT> | ValueT) => boolean;
     label?: React.ReactNode;
     onChange?: OnChangeT;
-    options?: Readonly<OptionsT<NameT>>;
+    options: Readonly<OptionsT<NameT>>;
     testId?: string;
     theme: Theme<ThemeKeyT>;
     value?: ValueT;

package/config/webpack/app-base.js

@@ -258,6 +258,11 @@ function configFactory(ops) {
                     generator: {
                         filename: 'fonts/[contenthash][ext][query]',
                     },
+                }, {
+                    // Aggregates source maps from dependencies.
+                    test: /\.js$/,
+                    enforce: 'pre',
+                    use: ['source-map-loader'],
                 }, {
                     /* Loads JS and JSX moudles, and inlines SVG assets. */
                     test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,

package/config/webpack/lib-base.js

@@ -74,6 +74,11 @@ function configFactory(ops) {
                         filename: '../shared/[path][name][ext]',
                         publicPath: `${ops.library}/build/shared`,
                     },
+                }, {
+                    // Aggregates source maps from dependencies.
+                    test: /\.js$/,
+                    enforce: 'pre',
+                    use: ['source-map-loader'],
                 }, {
                     /* Loads JS and JSX moudles, and inlines SVG assets. */
                     test: ops.typescript ? /\.((j|t)sx?|svg)$/ : /\.(jsx?|svg)$/,

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.39.0",
+  "version": "1.39.1",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -8,7 +8,7 @@
     "url": "https://github.com/birdofpreyru/react-utils/issues"
   },
   "dependencies": {
-    "@babel/runtime": "^7.24.7",
+    "@babel/runtime": "^7.24.8",
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.13.2",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.12",
@@ -22,7 +22,7 @@
     "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
-    "dayjs": "^1.11.11",
+    "dayjs": "^1.11.12",
     "express": "^4.19.2",
     "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
@@ -35,31 +35,31 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.24.1",
+    "react-router-dom": "^6.25.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
     "serve-favicon": "^2.5.0",
     "source-map-support": "^0.5.21",
     "uuid": "^10.0.0",
-    "winston": "^3.13.0"
+    "winston": "^3.13.1"
   },
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
-    "@babel/cli": "^7.24.7",
-    "@babel/core": "^7.24.7",
-    "@babel/eslint-parser": "^7.24.7",
+    "@babel/cli": "^7.24.8",
+    "@babel/core": "^7.24.9",
+    "@babel/eslint-parser": "^7.24.8",
     "@babel/eslint-plugin": "^7.24.7",
-    "@babel/node": "^7.24.7",
+    "@babel/node": "^7.24.8",
     "@babel/plugin-transform-runtime": "^7.24.7",
-    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-env": "^7.24.8",
     "@babel/preset-react": "^7.24.7",
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.2",
     "@dr.pogodin/babel-preset-svgr": "^1.8.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@testing-library/dom": "^10.3.1",
+    "@testing-library/dom": "^10.3.2",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
@@ -70,7 +70,7 @@
     "@types/csurf": "^1.11.5",
     "@types/express": "^4.17.21",
     "@types/jest": "^29.5.12",
-    "@types/lodash": "^4.17.6",
+    "@types/lodash": "^4.17.7",
     "@types/morgan": "^1.9.9",
     "@types/node-forge": "^1.3.11",
     "@types/pretty": "^2.0.3",
@@ -97,7 +97,7 @@
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jest": "^28.6.0",
     "eslint-plugin-jsx-a11y": "^6.9.0",
-    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -113,19 +113,20 @@
     "react-refresh": "^0.14.2",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.77.7",
+    "sass": "^1.77.8",
     "sass-loader": "^14.2.1",
     "sitemap": "^8.0.0",
-    "stylelint": "^16.6.1",
+    "source-map-loader": "^5.0.0",
+    "stylelint": "^16.7.0",
     "stylelint-config-standard-scss": "^13.1.0",
     "supertest": "^7.0.0",
     "tsc-alias": "^1.8.10",
-    "tstyche": "^2.0.0",
+    "tstyche": "^2.1.0",
     "typed-scss-modules": "^8.0.1",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^7.16.0",
-    "webpack": "^5.92.1",
-    "webpack-dev-middleware": "^7.2.1",
+    "typescript-eslint": "^7.16.1",
+    "webpack": "^5.93.0",
+    "webpack-dev-middleware": "^7.3.0",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",
     "workbox-core": "^7.1.0",

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

@@ -42,7 +42,10 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
   if (disabled) {
     if (theme.disabled) className += ` ${theme.disabled}`;
     return (
-      <div className={className} data-testid={testId}>
+      <div
+        className={className}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
+      >
         {children}
       </div>
     );
@@ -51,7 +54,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
     return (
       <Link
         className={className}
-        data-testid={testId}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
         enforceA={enforceA}
         onClick={onClick}
         onMouseDown={onMouseDown}
@@ -67,7 +70,7 @@ export const BaseButton: React.FunctionComponent<PropsT> = ({
   return (
     <div
       className={className}
-      data-testid={testId}
+      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
       onClick={onClick}
       onKeyDown={onClick && ((e) => {
         if (e.key === 'Enter') onClick(e);

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

@@ -37,7 +37,7 @@ const Input = forwardRef<HTMLInputElement, PropsT>((
     { label === undefined ? null : <div className={theme.label}>{label}</div> }
     <input
       className={theme.input}
-      data-testid={testId}
+      data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
       ref={ref}
       {...rest} // eslint-disable-line react/jsx-props-no-spreading
     />

package/src/shared/components/Modal/base-theme.scss

@@ -11,7 +11,7 @@
     position: fixed;
     top: 0;
     width: 100%;
-    z-index: 998;
+    z-index: $zIndexOfDefaultModalOverlay;
 
     &:focus { outline: none; }
   }
@@ -29,7 +29,7 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 999;
+    z-index: $zIndexOfDefaultModalOverlay + 1;
 
     @include xs-to-lg {
       max-width: 95vw;

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

@@ -147,7 +147,7 @@ const BaseModal: React.FunctionComponent<PropsT> = ({
         <div
           aria-modal="true"
           className={theme.container}
-          data-testid={testId}
+          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
           onClick={(e) => e.stopPropagation()}
           onWheel={(event) => event.stopPropagation()}
           ref={containerRef}

package/src/shared/components/selectors/NativeDropdown/index.tsx

@@ -76,7 +76,7 @@ const Dropdown: React.FunctionComponent<PropsT<string>> = ({
       <div className={theme.dropdown}>
         <select
           className={selectClassName}
-          data-testid={testId}
+          data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
           onChange={onChange}
           value={value}
         >

package/src/shared/components/selectors/common.ts

@@ -37,7 +37,7 @@ export type PropsT<
   filter?: (item: OptionT<NameT> | ValueT) => boolean;
   label?: React.ReactNode;
   onChange?: OnChangeT;
-  options?: Readonly<OptionsT<NameT>>;
+  options: Readonly<OptionsT<NameT>>;
   testId?: string;
   theme: Theme<ThemeKeyT>;
   value?: ValueT;

package/src/shared/utils/jest/index.tsx

@@ -81,14 +81,24 @@ export function mockAxios(handlers: AxiosRequestHandlerT[]) {
     }
 
     // Fallback to the regular network request.
-    const res = await axios({ ...config, adapter: ['xhr', 'http', 'fetch'] });
-
-    console.warn(
-      'Network request has not been mocked for a test.\n\nConfig:\n',
-      config,
-      '\n\nResult:\n',
-      JSON.stringify(res, null, 2),
-    );
+    let res: AxiosResponse;
+    try {
+      res = await axios({ ...config, adapter: ['xhr', 'http', 'fetch'] });
+      console.warn(
+        'Network request has not been mocked for a test.\n\nConfig:\n',
+        config,
+        '\n\nResult:\n',
+        JSON.stringify(res, null, 2),
+      );
+    } catch (e) {
+      console.warn(
+        'Network request has not been mocked for a test, and failed.\n\nConfig:\n',
+        config,
+        '\n\nError\n',
+        JSON.stringify(e, null, 2),
+      );
+      throw e;
+    }
 
     return res;
   };

package/src/styles/mixins.scss

@@ -1,4 +1,6 @@
 /* Collection of standard mixins, being used all around. */
 @import "_mixins/fonts";
 @import "_mixins/media";
-@import "_mixins/typography"
+@import "_mixins/typography";
+
+$zIndexOfDefaultModalOverlay: 998;