@capyx/components-library 0.0.16 → 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/RichTextInput.css

@@ -16,3 +16,21 @@
 	overflow-y: auto;
 	min-height: 150px;
 }
+
+/* --constrained modifier: bridges the flex chain through ReactQuill's .quill node.
+ * Only activates when the constrainHeight prop is true.
+ * Requires the host to set an explicit height on the wrapper (via style prop):
+ *   - flex fill:    style={{ flex: 1, minHeight: 0 }}
+ *   - fixed height: style={{ height: '40vh' }}
+ */
+.ql-rich-text-wrapper--constrained .quill {
+	flex: 1;
+	min-height: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.ql-rich-text-wrapper--constrained .ql-container {
+	flex: 1;
+	min-height: 0;
+}

package/dist/components/RichTextInput.d.ts

@@ -53,6 +53,15 @@ export type RichTextInputProps = {
     style?: CSSProperties;
     /** Extra CSS class names added to the outer wrapper `div`. */
     wrapperClassName?: string;
+    /**
+     * When true, activates internal height-constraining / scrollable mode by adding the
+     * `ql-rich-text-wrapper--constrained` CSS modifier class.
+     *
+     * Pass alongside a `style` that sets the height:
+     *   - Inside a flex column (e.g. a modal body):  `style={{ flex: 1, minHeight: 0 }}`
+     *   - Fixed-height inline placement:             `style={{ height: '40vh' }}`
+     */
+    constrainHeight?: boolean;
 };
 /**
  * RichTextInput - A rich text editor component using ReactQuill

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

@@ -1 +1 @@
-{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAG1F,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAiFhD,CAAC"}
+{"version":3,"file":"RichTextInput.d.ts","sourceRoot":"","sources":["../../lib/components/RichTextInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,EAAE,EAAwC,MAAM,OAAO,CAAC;AAG1F,OAAO,qCAAqC,CAAC;AAC7C,OAAO,qBAAqB,CAAC;AAE7B,QAAA,MAAM,OAAO,qIAAsI,CAAC;AACpJ,KAAK,UAAU,GAAG,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC;AAEzC;;GAEG;AACH,MAAM,MAAM,kBAAkB,GAAG;IAChC,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iFAAiF;IACjF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,mFAAmF;IACnF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,EAAE,CAAC;IACvB;;;;;;;;;;;;;;;;;;;;;;;OAuBG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;;;;;;OAOG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,eAAO,MAAM,aAAa,EAAE,EAAE,CAAC,kBAAkB,CAkFhD,CAAC"}

package/dist/components/RichTextInput.js

@@ -37,7 +37,7 @@ const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script'
  * </Modal>
  * ```
  */
-export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'], style, wrapperClassName, }) => {
+export const RichTextInput = ({ readonly = false, maxLength, value = '', onChange, isInvalid = false, formats = ['header', 'bold', 'italic', 'underline', 'list'], style, wrapperClassName, constrainHeight = false, }) => {
     const reactQuillRef = useRef(null);
     const [count, setCount] = useState(value.length);
     const checkCharacterCount = (event) => {
@@ -72,5 +72,5 @@ export const RichTextInput = ({ readonly = false, maxLength, value = '', onChang
             ],
     };
     // const formats = ['header', 'bold', 'color', 'italic', 'link', 'strike', 'script', 'underline', 'list', 'code', 'blockquote', 'code-block'];
-    return (_jsxs("div", { className: `ql-rich-text-wrapper${wrapperClassName ? ` ${wrapperClassName}` : ''}`, style: style, children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
+    return (_jsxs("div", { className: `ql-rich-text-wrapper${constrainHeight ? ' ql-rich-text-wrapper--constrained' : ''}${wrapperClassName ? ` ${wrapperClassName}` : ''}`, style: style, children: [_jsx(ReactQuill, { ref: reactQuillRef, theme: "snow", onKeyDown: checkCharacterCount, onKeyUp: setContentLength, formats: formats, modules: modules, value: value, onChange: onChange, readOnly: readonly, className: isInvalid ? 'is-invalid' : '' }), maxLength && (_jsxs(Form.Text, { className: count > maxLength ? 'text-danger' : 'text-muted', children: [count, "/", maxLength, " characters"] }))] }));
 };

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.16",
+	"version": "0.0.18",
 	"description": "Shared React component library for Capyx applications",
 	"publishConfig": {
 		"access": "public"