@dr.pogodin/react-utils 1.43.22 → 1.43.24

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

@@ -1,12 +1,14 @@
 import { type ChangeEventHandler, type FocusEventHandler, type KeyboardEventHandler } from 'react';
 import { type Theme } from '@dr.pogodin/react-themes';
-type ThemeKeyT = 'container' | 'hidden' | 'textarea';
+type ThemeKeyT = 'container' | 'hidden' | 'label' | 'textarea';
 type Props = {
     disabled?: boolean;
+    label?: string;
     onBlur?: FocusEventHandler<HTMLTextAreaElement>;
     onChange?: ChangeEventHandler<HTMLTextAreaElement>;
     onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
     placeholder?: string;
+    testId?: string;
     theme: Theme<ThemeKeyT>;
     value?: string;
 };

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

@@ -3,4 +3,5 @@ export declare const container: string;
 export declare const context: string;
 export declare const hidden: string;
 export declare const hoc: string;
+export declare const label: string;
 export declare const textarea: string;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.43.22",
+  "version": "1.43.24",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"

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

@@ -4,6 +4,7 @@ import {
   type FunctionComponent,
   type KeyboardEventHandler,
   useEffect,
+  useLayoutEffect,
   useRef,
   useState,
 } from 'react';
@@ -15,24 +16,29 @@ import defaultTheme from './style.scss';
 type ThemeKeyT =
   | 'container'
   | 'hidden'
+  | 'label'
   | 'textarea';
 
 type Props = {
   disabled?: boolean;
+  label?: string;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onKeyDown?: KeyboardEventHandler<HTMLTextAreaElement>;
   placeholder?: string;
+  testId?: string;
   theme: Theme<ThemeKeyT>;
   value?: string;
 };
 
 const TextArea: FunctionComponent<Props> = ({
   disabled,
+  label,
   onBlur,
   onChange,
   onKeyDown,
   placeholder,
+  testId,
   theme,
   value,
 }) => {
@@ -58,14 +64,21 @@ const TextArea: FunctionComponent<Props> = ({
     };
   }, []);
 
-  // This resizes the text area when its content is modified.
-  useEffect(() => {
+  // Resizes the text area when its content is modified.
+  //
+  // NOTE: useLayoutEffect() instead of useEffect() makes difference here,
+  // as it helps to avoid visible "content/height" jumps (i.e. with just
+  // useEffect() it becomes visible how the content is modified first,
+  // and then input height is incremented, if necessary).
+  // See: https://github.com/birdofpreyru/react-utils/issues/313
+  useLayoutEffect(() => {
     const el = hiddenAreaRef.current;
     if (el) setHeight(el.scrollHeight);
   }, [localValue]);
 
   return (
     <div className={theme.container}>
+      {label === undefined ? null : <div className={theme.label}>{label}</div>}
       <textarea
         className={`${theme.textarea} ${theme.hidden}`}
 
@@ -74,10 +87,20 @@ const TextArea: FunctionComponent<Props> = ({
         // of the primary textarea's height.
         readOnly
         ref={hiddenAreaRef}
-        value={localValue}
+
+        // The "-1" value of "tabIndex" removes this hidden text area from
+        // the tab-focus-chain.
+        tabIndex={-1}
+
+        // NOTE: With empty string value ("") the scrolling height of this text
+        // area is zero, thus collapsing <TextArea> height below the single line
+        // input height. To avoid it we fallback to whitespace (" ") character
+        // here.
+        value={localValue || ' '}
       />
       <textarea
         className={theme.textarea}
+        data-testid={process.env.NODE_ENV === 'production' ? undefined : testId}
         disabled={disabled}
         onBlur={onBlur}
 

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

@@ -8,6 +8,10 @@
     position: relative;
   }
 
+  &.label {
+    margin: 0 0.3em;
+  }
+
   &.textarea {
     background: white;
     border: 1px solid gray;
@@ -19,6 +23,7 @@
     overflow: hidden;
     padding: 0.3em 0.3em calc(0.3em + 1px);
     resize: none;
+    width: 100%;
 
     &:focus {
       border-color: blue;
@@ -38,7 +43,9 @@
   }
 
   &.hidden {
+    // NOTE: We hide it this way, as setting "display: none" will interfere
+    // with measurements, making the hidden input height zero.
+    opacity: 0;
     position: absolute;
-    z-index: -1;
   }
 }