@capyx/components-library 0.0.17 → 0.0.18

package/README.md

@@ -176,11 +176,11 @@ function MyForm() {
 
 By default the editor has no maximum height. In a constrained context — such as a Bootstrap `Modal` — you want the editor to grow until the modal fills the viewport, then scroll inside the editor instead of overflowing the page.
 
-Three things are required:
+Use the `constrainHeight` prop together with a `style` that sets the height. Three things are required:
 
 1. **`<Modal scrollable>`** — Bootstrap caps the modal body at the available viewport height.
 2. **`d-flex flex-column overflow-hidden` on `<Modal.Body>`** — turns the body into a flex column that constrains its children to the available height.
-3. **`style={{ flex: 1, minHeight: 0 }}` on `<RichTextInput>`** — `flex: 1` fills the remaining space; `minHeight: 0` is required in a flex context so the wrapper can shrink below its natural size and pass the overflow constraint down to Quill.
+3. **`constrainHeight` + `style={{ flex: 1, minHeight: 0 }}` on `<RichTextInput>`** — `constrainHeight` activates the CSS flex chain through Quill's internal DOM nodes; `flex: 1` fills the remaining space; `minHeight: 0` is required in a flex context so the wrapper can shrink below its natural size.
 
 ```tsx
 import { RichTextInput } from '@your-package/components-library';
@@ -200,6 +200,7 @@ function MyModal({ show, onHide }) {
         <RichTextInput
           value={content}
           onChange={setContent}
+          constrainHeight
           {/* flex:1 fills remaining space; minHeight:0 enables overflow */}
           style={{ flex: 1, minHeight: 0 }}
         />
@@ -226,6 +227,59 @@ function MyModal({ show, onHide }) {
 | `formats` | `FormatType[]` | `['header','bold','italic','underline','list']` | Allowed Quill formats |
 | `style` | `CSSProperties` | — | Inline styles on the outer wrapper `div`. Use to constrain height in a flex context |
 | `wrapperClassName` | `string` | — | Extra CSS class names on the outer wrapper `div` |
+| `constrainHeight` | `boolean` | `false` | Activates internal flex chain so the editor scrolls inside itself. Requires a height to be set via `style` (e.g. `style={{ flex: 1, minHeight: 0 }}` or `style={{ height: '40vh' }}`) |
+
+### TextAreaInput
+
+`TextAreaInput` is a multiline text input that **auto-grows with its content** using a row-counting approach. There are no inline `style` height overrides, so consumers can freely customise appearance with plain CSS.
+
+#### Basic usage
+
+```tsx
+import { TextAreaInput } from '@capyx/components-library';
+import { FormProvider, useForm } from 'react-hook-form';
+
+function MyForm() {
+  const methods = useForm();
+  return (
+    <FormProvider {...methods}>
+      <TextAreaInput name="notes" label="Notes" placeholder="Enter notes…" />
+    </FormProvider>
+  );
+}
+```
+
+#### Controlling row height
+
+```tsx
+{/* Starts at 5 rows, grows without limit */}
+<TextAreaInput name="bio" label="Biography" minRows={5} />
+
+{/* Starts at 2 rows, scrolls internally after 8 rows */}
+<TextAreaInput name="summary" label="Summary" maxRows={8} />
+
+{/* Fixed band: always between 3 and 6 rows */}
+<TextAreaInput name="notes" label="Notes" minRows={3} maxRows={6} />
+```
+
+#### Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `name` | `string` | — | Field name for form registration |
+| `label` | `string` | — | Label text |
+| `required` | `boolean` | `false` | Marks the field as required |
+| `maxLength` | `number` | — | Maximum number of characters allowed |
+| `placeholder` | `string` | — | Placeholder text |
+| `value` | `string` | — | Controlled value (standalone mode) |
+| `onChange` | `(value: string) => void` | — | Change callback |
+| `disabled` | `boolean` | `false` | Disables the field |
+| `isReadOnly` | `boolean` | `false` | Makes the field read-only |
+| `isPlainText` | `boolean` | `false` | Renders as plain text (no border) |
+| `controlSize` | `'sm' \| 'lg'` | — | Bootstrap size variant |
+| `debounceMs` | `number` | — | Debounce delay in milliseconds for `onChange` |
+| `minRows` | `number` | `2` | Minimum number of visible rows |
+| `maxRows` | `number` | — | Maximum rows before the textarea scrolls internally. Unset = grows without limit |
 
 ### Using Addons
 

package/dist/components/TextAreaInput.css

@@ -0,0 +1,6 @@
+/* Applied via className on every TextAreaInput <Form.Control>.
+   Using a stylesheet rule (not an inline style) so consumers can override
+   with normal CSS specificity — no !important required. */
+.rhi-textarea-input {
+	resize: none;
+}

package/dist/components/TextAreaInput.d.ts

@@ -1,4 +1,5 @@
 import { type FC } from 'react';
+import './TextAreaInput.css';
 /**
  * Props for the TextAreaInput component
  */
@@ -27,6 +28,16 @@ export type TextAreaInputProps = {
     isPlainText?: boolean;
     /** Debounce delay in milliseconds for value changes */
     debounceMs?: number;
+    /**
+     * Minimum number of visible rows.
+     * @default 2
+     */
+    minRows?: number;
+    /**
+     * Maximum number of visible rows before the textarea scrolls internally.
+     * When unset the textarea grows without any row cap.
+     */
+    maxRows?: number;
 };
 /**
  * A flexible textarea input component with automatic height adjustment,

package/dist/components/TextAreaInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAAE,EAKP,MAAM,OAAO,CAAC;AAIf;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CA+HhD,CAAC"}
+{"version":3,"file":"TextAreaInput.d.ts","sourceRoot":"","sources":["../../lib/components/TextAreaInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAEN,KAAK,EAAE,EAKP,MAAM,OAAO,CAAC;AAGf,OAAO,qBAAqB,CAAC;AAE7B;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,qCAAqC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAC1B,oDAAoD;IACpD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAIF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAyIhD,CAAC"}

package/dist/components/TextAreaInput.js

@@ -3,7 +3,8 @@ import debounce from 'lodash.debounce';
 import { useEffect, useLayoutEffect, useRef, useState, } from 'react';
 import { Form } from 'react-bootstrap';
 import { Controller, useFormContext } from 'react-hook-form';
-const MIN_TEXTAREA_HEIGHT = 32;
+import './TextAreaInput.css';
+const MIN_ROWS = 2;
 /**
  * A flexible textarea input component with automatic height adjustment,
  * react-hook-form integration, and optional debouncing.
@@ -43,7 +44,8 @@ const MIN_TEXTAREA_HEIGHT = 32;
  *   placeholder="Add your comment..."
  * />
  */
-export const TextAreaInput = ({ name, label, required = false, maxLength, controlSize, placeholder, value, onChange, disabled = false, isReadOnly = false, isPlainText = false, debounceMs, }) => {
+export const TextAreaInput = ({ name, label, required = false, maxLength, controlSize, placeholder, value, onChange, disabled = false, isReadOnly = false, isPlainText = false, debounceMs, minRows, maxRows, }) => {
+    const resolvedMinRows = minRows ?? MIN_ROWS;
     const formContext = useFormContext();
     // Create ref for debounced onChange to clean up on unmount
     const debouncedOnChangeRef = useRef(null);
@@ -78,17 +80,27 @@ export const TextAreaInput = ({ name, label, required = false, maxLength, contro
     const errorMessage = getFieldError(name);
     const isInvalid = !!errorMessage;
     const textareaRef = useRef(null);
-    const [_textAreaValue, setTextAreaValue] = useState('');
+    const [rowCount, setRowCount] = useState(resolvedMinRows);
     const _handleTextAreaChange = (event) => {
-        setTextAreaValue(event.target.value);
         handleChange(event.target.value);
     };
+    // Runs after every render (no dep-array) so it reacts to any value change,
+    // including programmatic resets (e.g. react-hook-form reset()).
+    // Guards against infinite loops by only scheduling a state update when the
+    // row count actually changes — React will bail out of the re-render when the
+    // new state value is identical to the current one.
     useLayoutEffect(() => {
-        if (textareaRef.current) {
-            textareaRef.current.style.height = 'inherit';
-            textareaRef.current.style.height = `${Math.max(textareaRef.current.scrollHeight, MIN_TEXTAREA_HEIGHT)}px`;
-        }
-    }, []);
+        const el = textareaRef.current;
+        if (!el)
+            return;
+        const savedRows = el.rows;
+        el.rows = 1; // collapse to measure natural scrollHeight
+        const lineHeight = Number.parseInt(getComputedStyle(el).lineHeight, 10) || 20;
+        const rawRows = Math.ceil(el.scrollHeight / lineHeight);
+        el.rows = savedRows; // restore before React paints
+        const next = Math.max(resolvedMinRows, maxRows !== undefined ? Math.min(rawRows, maxRows) : rawRows);
+        setRowCount((prev) => (prev === next ? prev : next));
+    });
     // Integrated with react-hook-form
     if (formContext) {
         return (_jsx(Controller, { name: name, control: formContext.control, rules: {
@@ -101,13 +113,9 @@ export const TextAreaInput = ({ name, label, required = false, maxLength, contro
                     : undefined,
             }, render: ({ field }) => (_jsx(Form.Control, { ...field, onChange: (e) => {
                     field.onChange(e);
-                    setTextAreaValue(e.target.value);
-                    handleChange(e.target.value);
-                }, ref: textareaRef, style: {
-                    minHeight: MIN_TEXTAREA_HEIGHT,
-                    resize: 'none',
-                }, as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, isInvalid: isInvalid })) }));
+                    _handleTextAreaChange(e);
+                }, ref: textareaRef, className: "rhi-textarea-input", as: "textarea", rows: rowCount, required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText, isInvalid: isInvalid })) }));
     }
     // Standalone mode
-    return (_jsx(Form.Control, { as: "textarea", required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
+    return (_jsx(Form.Control, { as: "textarea", ref: textareaRef, className: "rhi-textarea-input", rows: rowCount, required: required, maxLength: maxLength, size: controlSize, placeholder: placeholder, value: value || '', onChange: _handleTextAreaChange, disabled: disabled, readOnly: isReadOnly, plaintext: isPlainText }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@capyx/components-library",
-	"version": "0.0.17",
+	"version": "0.0.18",
 	"description": "Shared React component library for Capyx applications",
 	"publishConfig": {
 		"access": "public"