@dr.pogodin/react-utils 1.43.23 → 1.43.24

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 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>;

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.23",
+  "version": "1.43.24",
   "bin": {
     "react-utils-build": "bin/build.js",
     "react-utils-setup": "bin/setup.js"

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

@@ -16,10 +16,12 @@ 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>;
@@ -31,6 +33,7 @@ type Props = {
 
 const TextArea: FunctionComponent<Props> = ({
   disabled,
+  label,
   onBlur,
   onChange,
   onKeyDown,
@@ -75,6 +78,7 @@ const TextArea: FunctionComponent<Props> = ({
 
   return (
     <div className={theme.container}>
+      {label === undefined ? null : <div className={theme.label}>{label}</div>}
       <textarea
         className={`${theme.textarea} ${theme.hidden}`}
 

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;
@@ -39,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;
   }
 }