@dr.pogodin/react-utils 1.44.2 → 1.44.4

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

@@ -1,7 +1,9 @@
-import { type Ref } from 'react';
+import { type ReactNode, type Ref } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'container' | 'empty' | 'focused' | 'input' | 'label';
+type ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage' | 'focused' | 'input' | 'label';
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
+    children?: ReactNode;
+    error?: ReactNode;
     label?: React.ReactNode;
     ref?: Ref<HTMLInputElement>;
     testId?: string;

package/build/types-scss/src/shared/components/Input/theme.scss.d.ts

@@ -1,6 +1,9 @@
 export declare const ad: string;
+export declare const children: string;
 export declare const container: string;
 export declare const context: string;
+export declare const error: string;
+export declare const errorMessage: string;
 export declare const hoc: string;
 export declare const input: string;
 export declare const label: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.44.2",
+  "version": "1.44.4",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -19,7 +19,7 @@
     "axios": "^1.11.0",
     "commander": "^14.0.0",
     "compression": "^1.8.1",
-    "config": "^4.1.0",
+    "config": "^4.1.1",
     "cookie": "^1.0.2",
     "cookie-parser": "^1.4.7",
     "cross-env": "^10.0.0",
@@ -34,7 +34,7 @@
     "raf": "^3.4.1",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router": "^7.8.0",
+    "react-router": "^7.8.1",
     "request-ip": "^3.3.0",
     "rimraf": "^6.0.0",
     "serialize-javascript": "^6.0.2",
@@ -70,7 +70,7 @@
     "@types/jest": "^30.0.0",
     "@types/lodash": "^4.17.20",
     "@types/morgan": "^1.9.10",
-    "@types/node-forge": "^1.3.13",
+    "@types/node-forge": "^1.3.14",
     "@types/pretty": "^2.0.3",
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
@@ -84,13 +84,13 @@
     "babel-jest": "^30.0.5",
     "babel-loader": "^10.0.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "core-js": "^3.45.0",
+    "core-js": "^3.45.1",
     "css-loader": "^7.1.2",
     "css-minimizer-webpack-plugin": "^7.0.2",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.0.5",
     "jest-environment-jsdom": "^30.0.5",
-    "memfs": "^4.36.0",
+    "memfs": "^4.36.3",
     "mini-css-extract-plugin": "^2.9.4",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -112,7 +112,7 @@
     "tstyche": "^4.3.0",
     "typed-scss-modules": "^8.1.1",
     "typescript": "^5.9.2",
-    "webpack": "^5.101.2",
+    "webpack": "^5.101.3",
     "webpack-dev-middleware": "^7.4.2",
     "webpack-hot-middleware": "^2.26.1",
     "webpack-merge": "^6.0.1",

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

@@ -1,5 +1,6 @@
 import {
   type FunctionComponent,
+  type ReactNode,
   type Ref,
   useRef,
   useState,
@@ -9,9 +10,12 @@ import themed, { type Theme } from '@dr.pogodin/react-themes';
 
 import defaultTheme from './theme.scss';
 
-type ThemeKeyT = 'container' | 'empty' | 'focused' | 'input' | 'label';
+type ThemeKeyT = 'children' | 'container' | 'empty' | 'error' | 'errorMessage'
+  | 'focused' | 'input' | 'label';
 
 type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
+  children?: ReactNode;
+  error?: ReactNode;
   label?: React.ReactNode;
   ref?: Ref<HTMLInputElement>;
   testId?: string;
@@ -27,6 +31,8 @@ type PropsT = React.InputHTMLAttributes<HTMLInputElement> & {
  * `<input>` element.
  */
 const Input: FunctionComponent<PropsT> = ({
+  children,
+  error,
   label,
   ref,
   testId,
@@ -47,8 +53,10 @@ const Input: FunctionComponent<PropsT> = ({
 
   if (!rest.value && theme.empty) containerClassName += ` ${theme.empty}`;
 
+  if (error) containerClassName += ` ${theme.error}`;
+
   return (
-    <span
+    <div
       className={containerClassName}
       onFocus={() => {
         // TODO: It does not really work if a callback-style `ref` is passed in,
@@ -77,7 +85,11 @@ const Input: FunctionComponent<PropsT> = ({
           rest.onFocus?.(e);
         } : rest.onFocus}
       />
-    </span>
+      {error && error !== true
+        ? <div className={theme.errorMessage}>{error}</div>
+        : null}
+      {children ? <div className={theme.children}>{children}</div> : null}
+    </div>
   );
 };
 

package/src/shared/components/Input/theme.scss

@@ -4,7 +4,13 @@
   &.container {
     align-items: center;
     display: inline-flex;
+    flex-wrap: wrap;
     margin: 0.1em;
+    position: relative;
+  }
+
+  &.children {
+    width: 100%;
   }
 
   &.input {
@@ -12,6 +18,7 @@
     border-radius: 0.3em;
     cursor: text;
     font: inherit;
+    flex: 1;
     outline: none;
     padding: 0.3em 0.3em calc(0.3em + 1px);
 
@@ -25,4 +32,21 @@
     margin: 0 0.6em 0 1.5em;
     pointer-events: none;
   }
+
+  &.error &.input {
+    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%;
+  }
 }