@dr.pogodin/react-utils 1.44.7 → 1.44.9

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

@@ -1,8 +1,9 @@
-import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEventHandler } from 'react';
+import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEventHandler, type ReactNode } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';
+type ThemeKeyT = 'container' | 'error' | 'errorMessage' | 'hidden' | 'label' | 'textarea';
 type Props = {
     disabled?: boolean;
+    error?: ReactNode;
     label?: string;
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;

package/build/types-scss/src/shared/components/TextArea/style.scss.d.ts

@@ -1,6 +1,8 @@
 export declare const ad: string;
 export declare const container: string;
 export declare const context: string;
+export declare const error: string;
+export declare const errorMessage: string;
 export declare const hidden: string;
 export declare const hoc: string;
 export declare const label: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.44.7",
+  "version": "1.44.9",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -16,8 +16,8 @@
     "@dr.pogodin/react-helmet": "^3.0.4",
     "@dr.pogodin/react-themes": "^1.9.2",
     "@jest/environment": "^30.1.2",
-    "axios": "^1.11.0",
-    "commander": "^14.0.0",
+    "axios": "^1.12.2",
+    "commander": "^14.0.1",
     "compression": "^1.8.1",
     "config": "^4.1.1",
     "cookie": "^1.0.2",
@@ -34,7 +34,7 @@
     "raf": "^3.4.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.8.2",
+    "react-router": "^7.9.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
@@ -55,7 +55,7 @@
     "@babel/register": "^7.28.3",
     "@dr.pogodin/babel-plugin-transform-assets": "^1.2.5",
     "@dr.pogodin/babel-preset-svgr": "^1.9.2",
-    "@dr.pogodin/eslint-configs": "^0.0.11",
+    "@dr.pogodin/eslint-configs": "^0.0.12",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.6.1",
     "@standard-schema/spec": "^1.0.0",
     "@testing-library/dom": "^10.4.1",
@@ -72,7 +72,7 @@
     "@types/morgan": "^1.9.10",
     "@types/node-forge": "^1.3.14",
     "@types/pretty": "^2.0.3",
-    "@types/react": "^19.1.12",
+    "@types/react": "^19.1.13",
     "@types/react-dom": "^19.1.9",
     "@types/request-ip": "^0.0.41",
     "@types/serialize-javascript": "^5.0.4",
@@ -90,7 +90,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.1.3",
     "jest-environment-jsdom": "^30.1.2",
-    "memfs": "^4.38.2",
+    "memfs": "^4.46.0",
     "mini-css-extract-plugin": "^2.9.4",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -101,19 +101,19 @@
     "react-refresh": "^0.17.0",
     "regenerator-runtime": "^0.14.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.92.1",
+    "sass": "^1.93.2",
     "sass-loader": "^16.0.5",
     "sitemap": "^8.0.0",
     "source-map-loader": "^5.0.0",
     "stylelint": "^16.24.0",
-    "stylelint-config-standard-scss": "^15.0.1",
+    "stylelint-config-standard-scss": "^16.0.0",
     "supertest": "^7.1.4",
     "tsc-alias": "1.8.16",
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.2",
     "webpack": "^5.101.3",
-    "webpack-dev-middleware": "^7.4.3",
+    "webpack-dev-middleware": "^7.4.4",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",
     "workbox-core": "^7.3.0",

package/src/server/renderer.tsx

@@ -401,6 +401,8 @@ export default function factory(
         }
       }
 
+      const brr = ops.beforeRender!(req, sanitizedConfig as unknown as ConfigT);
+
       const [{
         configToInject,
         extraScripts,
@@ -409,7 +411,10 @@ export default function factory(
         cipher,
         iv,
       }] = await Promise.all([
-        ops.beforeRender!(req, sanitizedConfig as unknown as ConfigT),
+        // NOTE: Written this way to avoid triggering the "await-thenable"
+        // ESLint rule.
+        brr instanceof Promise ? brr : Promise.resolve(brr),
+
         prepareCipher(buildInfo.key),
       ]);
 

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

@@ -3,6 +3,7 @@ import {
   type FocusEventHandler,
   type FunctionComponent,
   type KeyboardEventHandler,
+  type ReactNode,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -13,10 +14,12 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './style.scss';
 
-type ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';
+type ThemeKeyT = 'container' | 'error' | 'errorMessage' | 'hidden' | 'label'
+  | 'textarea';
 
 type Props = {
   disabled?: boolean;
+  error?: ReactNode;
   label?: string;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
@@ -29,6 +32,7 @@ type Props = {
 
 const TextArea: FunctionComponent<Props> = ({
   disabled,
+  error,
   label,
   onBlur,
   onChange,
@@ -74,9 +78,12 @@ const TextArea: FunctionComponent<Props> = ({
     if (el) setHeight(el.scrollHeight);
   }, [localValue]);
 
+  let containerClassName = theme.container;
+  if (error) containerClassName += ` ${theme.error}`;
+
   return (
     <div
-      className={theme.container}
+      className={containerClassName}
       onFocus={() => {
         textAreaRef.current?.focus();
       }}
@@ -122,6 +129,9 @@ const TextArea: FunctionComponent<Props> = ({
         style={{ height }}
         value={localValue}
       />
+      {error && error !== true
+        ? <div className={theme.errorMessage}>{error}</div>
+        : null}
     </div>
   );
 };

package/src/shared/components/TextArea/style.scss

@@ -4,6 +4,8 @@
 .context,
 .ad.hoc {
   &.container {
+    display: inline-flex;
+    flex-wrap: wrap;
     margin: 0.1em;
     position: relative;
   }
@@ -42,6 +44,21 @@
     }
   }
 
+  &.error &.textarea {
+    border-color: red;
+
+    &:focus { box-shadow: 0 0 3px 1px orangered }
+  }
+
+  &.errorMessage {
+    color: red;
+    font-size: 0.8em;
+    font-style: italic;
+    padding-right: 0.6em;
+    text-align: right;
+    width: 100%;
+  }
+
   &.hidden {
     // NOTE: We hide it this way, as setting "display: none" will interfere
     // with measurements, making the hidden input height zero.