@dr.pogodin/react-utils 1.44.8 → 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.8",
+  "version": "1.44.9",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"
@@ -90,7 +90,7 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^30.1.3",
     "jest-environment-jsdom": "^30.1.2",
-    "memfs": "^4.42.0",
+    "memfs": "^4.46.0",
     "mini-css-extract-plugin": "^2.9.4",
     "mockdate": "^3.0.5",
     "nodelist-foreach-polyfill": "^1.2.0",
@@ -101,7 +101,7 @@
     "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",
@@ -113,7 +113,7 @@
     "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/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.