@dr.pogodin/react-utils 1.26.3 → 1.26.5

package/config/webpack/app-development.d.ts

@@ -1,8 +1,10 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import webpack from 'webpack';
 import { type OptionsT as BaseOptionsT } from './app-base';
 type OptionsT = BaseOptionsT & {
     dontUseHmr?: boolean;
     dontUseReactGlobalStateDebugging?: boolean;
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
 };
 /**
  * @param ops

package/config/webpack/app-development.js

@@ -28,10 +28,7 @@ function configFactory(ops) {
         entry.push('webpack-hot-middleware/client?reload=true');
     entry.push(...Array.isArray(o.entry) ? o.entry : [o.entry]);
     const plugins = [
-        new mini_css_extract_plugin_1.default({
-            chunkFilename: '[id].css',
-            filename: '[id].css',
-        }),
+        new mini_css_extract_plugin_1.default(Object.assign({ chunkFilename: '[id].css', filename: '[id].css' }, ops.cssExtractionOptions)),
         new webpack_1.default.DefinePlugin({
             'process.env.BABEL_ENV': JSON.stringify('development'),
             'process.env.DEV_TOOLS': JSON.stringify(true),

package/config/webpack/app-production.d.ts

@@ -3,9 +3,12 @@
  * @module webpack/app-production
  * @desc Production Webpack configuration for applications.
  */
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { type Configuration } from 'webpack';
 import { type OptionsT as BaseOptionsT } from './app-base';
-type OptionsT = BaseOptionsT;
+type OptionsT = BaseOptionsT & {
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
+};
 /**
  * @param {object} ops
  * @param {string} ops.context Base URL for resolution of relative config paths.

package/config/webpack/app-production.js

@@ -46,10 +46,7 @@ function configFactory(ops) {
                 'process.env.BABEL_ENV': JSON.stringify('production'),
                 'process.env.NODE_ENV': JSON.stringify('production'),
             }),
-            new mini_css_extract_plugin_1.default({
-                chunkFilename: '[contenthash].css',
-                filename: '[contenthash].css',
-            }),
+            new mini_css_extract_plugin_1.default(Object.assign({ chunkFilename: '[contenthash].css', filename: '[contenthash].css' }, ops.cssExtractionOptions)),
         ],
     });
     return res;

package/config/webpack/lib-base.d.ts

@@ -1,8 +1,10 @@
+import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { type Configuration } from 'webpack';
 export type OptionsT = {
     babelEnv: string;
     babelLoaderOptions?: object;
     context: string;
+    cssExtractionOptions?: MiniCssExtractPlugin.PluginOptions;
     cssLocalIdent?: string;
     dontUseProgressPlugin?: boolean;
     entry: string | string[];

package/config/webpack/lib-base.js

@@ -17,7 +17,7 @@ const utils_1 = require("@dr.pogodin/babel-plugin-react-css-modules/utils");
  */
 function configFactory(ops) {
     const plugins = [
-        new mini_css_extract_plugin_1.default({ filename: 'style.css' }),
+        new mini_css_extract_plugin_1.default(Object.assign({ filename: 'style.css' }, ops.cssExtractionOptions)),
     ];
     if (!ops.dontUseProgressPlugin)
         plugins.push(new webpack_1.ProgressPlugin());

package/config/webpack/lib-development.js

@@ -9,7 +9,8 @@ const webpack_1 = __importDefault(require("webpack"));
 const webpack_merge_1 = require("webpack-merge");
 const lib_base_1 = __importDefault(require("./lib-base"));
 function configFactory(ops) {
-    return (0, webpack_merge_1.merge)((0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'development', cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]', mode: 'development', outputPath: path_1.default.resolve(__dirname, ops.context, 'build/development') })), {
+    const { outputPath = 'build/development' } = ops;
+    return (0, webpack_merge_1.merge)((0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'development', cssLocalIdent: '[package]___[path][name]___[local]___[hash:base64:6]', mode: 'development', outputPath: path_1.default.resolve(__dirname, ops.context, outputPath) })), {
         plugins: [
             new webpack_1.default.DefinePlugin({
                 // Dev. build of the library wraps modules inside eval() statements,

package/config/webpack/lib-production.js

@@ -10,7 +10,8 @@ const webpack_1 = __importDefault(require("webpack"));
 const webpack_merge_1 = require("webpack-merge");
 const lib_base_1 = __importDefault(require("./lib-base"));
 function configFactory(ops) {
-    const baseConfig = (0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'production', cssLocalIdent: '[hash:base64:6]', mode: 'production', outputPath: path_1.default.resolve(__dirname, ops.context, 'build/production') }));
+    const { outputPath = 'build/production' } = ops;
+    const baseConfig = (0, lib_base_1.default)(Object.assign(Object.assign({}, ops), { babelEnv: 'production', cssLocalIdent: '[hash:base64:6]', mode: 'production', outputPath: path_1.default.resolve(__dirname, ops.context, outputPath) }));
     return (0, webpack_merge_1.merge)(baseConfig, {
         devtool: 'source-map',
         optimization: {

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.26.3",
+  "version": "1.26.5",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -12,19 +12,19 @@
     "@dr.pogodin/babel-plugin-react-css-modules": "^6.12.0",
     "@dr.pogodin/csurf": "^1.13.0",
     "@dr.pogodin/js-utils": "^0.0.6",
-    "@dr.pogodin/react-global-state": "^0.10.0-alpha.5",
+    "@dr.pogodin/react-global-state": "^0.11.0",
     "@dr.pogodin/react-themes": "^1.5.1",
     "@jest/environment": "^29.7.0",
-    "axios": "^1.5.1",
+    "axios": "^1.6.2",
     "commander": "^11.1.0",
     "compression": "^1.7.4",
     "config": "^3.3.9",
-    "cookie": "^0.5.0",
+    "cookie": "^0.6.0",
     "cookie-parser": "^1.4.6",
     "cross-env": "^7.0.3",
     "dayjs": "^1.11.10",
     "express": "^4.18.2",
-    "helmet": "^7.0.0",
+    "helmet": "^7.1.0",
     "http-status-codes": "^2.3.0",
     "joi": "^17.11.0",
     "lodash": "^4.17.21",
@@ -36,7 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-router-dom": "^6.17.0",
+    "react-router-dom": "^6.19.0",
     "request-ip": "^3.3.0",
     "rimraf": "^5.0.5",
     "serialize-javascript": "^6.0.1",
@@ -48,57 +48,57 @@
   "description": "Collection of generic ReactJS components and utils",
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
-    "@babel/eslint-parser": "^7.22.15",
+    "@babel/core": "^7.23.3",
+    "@babel/eslint-parser": "^7.23.3",
     "@babel/eslint-plugin": "^7.22.10",
     "@babel/node": "^7.22.19",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@babel/register": "^7.22.15",
     "@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.2",
     "@tsd/typescript": "^5.1.6",
-    "@types/compression": "^1.7.4",
-    "@types/config": "^3.3.2",
-    "@types/cookie": "^0.5.3",
-    "@types/cookie-parser": "^1.4.5",
-    "@types/csurf": "^1.11.4",
-    "@types/express": "^4.17.20",
-    "@types/jest": "^29.5.6",
-    "@types/lodash": "^4.14.200",
-    "@types/morgan": "^1.9.7",
-    "@types/node-forge": "^1.3.8",
-    "@types/pretty": "^2.0.2",
-    "@types/react": "^18.2.31",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-helmet": "^6.1.8",
-    "@types/react-test-renderer": "^18.0.5",
-    "@types/request-ip": "^0.0.40",
-    "@types/serialize-javascript": "^5.0.3",
-    "@types/serve-favicon": "^2.5.6",
-    "@types/supertest": "^2.0.15",
-    "@types/uuid": "^9.0.6",
-    "@types/webpack": "^5.28.4",
-    "@typescript-eslint/eslint-plugin": "^6.9.0",
-    "@typescript-eslint/parser": "^6.9.0",
+    "@types/compression": "^1.7.5",
+    "@types/config": "^3.3.3",
+    "@types/cookie": "^0.5.4",
+    "@types/cookie-parser": "^1.4.6",
+    "@types/csurf": "^1.11.5",
+    "@types/express": "^4.17.21",
+    "@types/jest": "^29.5.8",
+    "@types/lodash": "^4.14.201",
+    "@types/morgan": "^1.9.9",
+    "@types/node-forge": "^1.3.9",
+    "@types/pretty": "^2.0.3",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-helmet": "^6.1.9",
+    "@types/react-test-renderer": "^18.0.6",
+    "@types/request-ip": "^0.0.41",
+    "@types/serialize-javascript": "^5.0.4",
+    "@types/serve-favicon": "^2.5.7",
+    "@types/supertest": "^2.0.16",
+    "@types/uuid": "^9.0.7",
+    "@types/webpack": "^5.28.5",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "autoprefixer": "^10.4.16",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "babel-plugin-module-resolver": "^5.0.0",
-    "core-js": "^3.33.1",
+    "core-js": "^3.33.3",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.52.0",
+    "eslint": "^8.54.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-import-resolver-babel-module": "^5.3.2",
     "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.4.3",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-jest": "^27.6.0",
+    "eslint-plugin-jsx-a11y": "^6.8.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "identity-obj-proxy": "^3.0.0",
@@ -116,11 +116,11 @@
     "react-test-renderer": "^18.2.0",
     "regenerator-runtime": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.69.4",
+    "sass": "^1.69.5",
     "sass-loader": "^13.3.2",
     "sitemap": "^7.1.1",
     "stylelint": "^15.11.0",
-    "stylelint-config-standard-scss": "^11.0.0",
+    "stylelint-config-standard-scss": "^11.1.0",
     "supertest": "^6.3.3",
     "tsc-alias": "^1.8.8",
     "typed-scss-modules": "^7.1.4",

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

@@ -65,11 +65,14 @@ const BaseButton: React.FunctionComponent<PropsT> = ({
       </Link>
     );
   }
+
   return (
     <div
       className={className}
       onClick={onClick}
-      onKeyDown={onClick}
+      onKeyDown={onClick && ((e) => {
+        if (e.key === 'Enter') onClick(e);
+      })}
       onMouseDown={onMouseDown}
       role="button"
       tabIndex={0}

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

@@ -20,10 +20,10 @@ type PropsT = {
  * [Other theming properties](https://www.npmjs.com/package/@dr.pogodin/react-themes#themed-component-properties)
  */
 const Throbber: React.FunctionComponent<PropsT> = ({ theme }) => (
-  <span className={theme.container} styleName="container">
-    <span className={theme.circle} styleName="circle" />
-    <span className={theme.circle} styleName="circle" />
-    <span className={theme.circle} styleName="circle" />
+  <span className={theme.container}>
+    <span className={theme.circle} />
+    <span className={theme.circle} />
+    <span className={theme.circle} />
   </span>
 );