@vectara/vectara-ui 16.6.0 → 16.8.0

package/lib/components/form/textArea/TextArea.d.ts

@@ -2,6 +2,7 @@ type Props = React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaEl
     fullWidth?: boolean;
     isInvalid?: boolean;
     resizable?: boolean;
+    autoGrow?: boolean;
 };
 export declare const VuiTextArea: import("react").ForwardRefExoticComponent<Omit<Props, "ref"> & import("react").RefAttributes<HTMLTextAreaElement | null>>;
 export {};

package/lib/components/form/textArea/TextArea.js

@@ -10,14 +10,39 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from "react";
+import { forwardRef, useLayoutEffect, useRef } from "react";
 import classNames from "classnames";
 export const VuiTextArea = forwardRef((_a, ref) => {
-    var { className, fullWidth, isInvalid, resizable } = _a, rest = __rest(_a, ["className", "fullWidth", "isInvalid", "resizable"]);
+    var { className, fullWidth, isInvalid, resizable, autoGrow } = _a, rest = __rest(_a, ["className", "fullWidth", "isInvalid", "resizable", "autoGrow"]);
     const classes = classNames("vuiTextArea", {
         "vuiTextArea-isInvalid": isInvalid,
-        "vuiTextArea--fullWidth": fullWidth
+        "vuiTextArea--fullWidth": fullWidth,
+        "vuiTextArea--autoGrow": autoGrow
     }, className);
     const style = Object.assign(Object.assign({}, rest.style), { resize: resizable ? "vertical" : "none" });
-    return _jsx("textarea", Object.assign({}, rest, { ref: ref, className: classes, style: style }));
+    const internalRef = useRef(null);
+    const setRefs = (el) => {
+        internalRef.current = el;
+        if (typeof ref === "function")
+            ref(el);
+        else if (ref)
+            ref.current = el;
+    };
+    // Auto-grow the textarea to fit its content. Reset to "auto" first so
+    // scrollHeight reflects the natural height after deletions, not the
+    // previously-set inline height.
+    useLayoutEffect(() => {
+        if (!autoGrow)
+            return;
+        const el = internalRef.current;
+        if (!el)
+            return;
+        el.style.height = "auto";
+        // scrollHeight excludes borders, but with box-sizing: border-box the
+        // assigned height includes them — without this offset the content would
+        // overflow by the border width and show a spurious scrollbar.
+        const borderY = el.offsetHeight - el.clientHeight;
+        el.style.height = `${el.scrollHeight + borderY}px`;
+    }, [autoGrow, rest.value]);
+    return _jsx("textarea", Object.assign({}, rest, { ref: setRefs, className: classes, style: style }));
 });

package/lib/components/form/textArea/_index.scss

@@ -16,3 +16,9 @@
 .vuiTextArea--fullWidth {
   width: 100%;
 }
+
+.vuiTextArea--autoGrow {
+  min-height: 0;
+  line-height: 1.6;
+  max-height: 12rem;
+}

package/lib/components/formGroup/FormGroup.d.ts

@@ -2,10 +2,11 @@ type Props = {
     labelFor?: string;
     label?: string;
     labelSize?: "s" | "xs";
+    labelRightContent?: React.ReactNode;
     children: React.ReactElement;
     helpText?: React.ReactNode;
     errors?: string[];
     isRequired?: boolean;
 };
-export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const VuiFormGroup: ({ children, labelFor, helpText, label, labelSize, labelRightContent, errors, isRequired }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

package/lib/components/formGroup/FormGroup.js

@@ -9,8 +9,9 @@ import { VuiTextInput } from "../form/input/TextInput";
 import { VuiNumberInput } from "../form/input/NumberInput";
 import { VuiTextArea } from "../form/textArea/TextArea";
 import { VuiSelect } from "../form/select/Select";
+import { VuiFlexContainer } from "../flex/FlexContainer";
 const VALIDATION_ALLOWLIST = [VuiTextInput, VuiNumberInput, VuiTextArea, VuiSelect];
-export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", errors, isRequired }) => {
+export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize = "s", labelRightContent, errors, isRequired }) => {
     const ariaProps = {
         "aria-describedby": ""
     };
@@ -33,5 +34,5 @@ export const VuiFormGroup = ({ children, labelFor, helpText, label, labelSize =
         cloneProps.isInvalid = errors && errors.length > 0;
     }
     const content = cloneElement(children, cloneProps);
-    return (_jsxs("div", { children: [label && (_jsxs(_Fragment, { children: [_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
+    return (_jsxs("div", { children: [(label || labelRightContent) && (_jsxs(_Fragment, { children: [_jsxs(VuiFlexContainer, Object.assign({ justifyContent: "spaceBetween", alignItems: "center", spacing: "s" }, { children: [label ? (_jsxs(VuiLabel, Object.assign({ labelFor: labelFor, size: labelSize }, { children: [label, isRequired && " (required)"] }))) : (_jsx("span", {})), labelRightContent] })), _jsx(VuiSpacer, { size: labelSize === "s" ? "xs" : "xxs" })] })), helpText && (_jsxs(_Fragment, { children: [_jsx(VuiText, Object.assign({ size: "xs", id: ariaDescribedByLabel }, { children: _jsx("p", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: helpText })) }) })), _jsx(VuiSpacer, { size: "xs" })] })), errorMessages && (_jsxs(_Fragment, { children: [errorMessages, _jsx(VuiSpacer, { size: "xs" })] })), content] }));
 };

package/lib/styles/index.css

@@ -3007,6 +3007,12 @@ h2.react-datepicker__current-month {
   width: 100%;
 }
 
+.vuiTextArea--autoGrow {
+  min-height: 0;
+  line-height: 1.6;
+  max-height: 12rem;
+}
+
 .vuiGridContainer {
   container-type: inline-size;
   width: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vectara/vectara-ui",
-  "version": "16.6.0",
+  "version": "16.8.0",
   "homepage": "./",
   "description": "Vectara's design system, codified as a React and Sass component library",
   "author": "Vectara",

package/src/docs/pages/formGroup/LabelRightContent.tsx

@@ -0,0 +1,35 @@
+import { useState } from "react";
+import { VuiFormGroup, VuiSelect, VuiTextInput } from "../../../lib";
+
+type limitMode = "static" | "dynamic" | "agent" | "disabled";
+
+const limitModeOptions = [
+  { text: "Statically defined", value: "static" as const },
+  { text: "Dynamically defined", value: "dynamic" as const },
+  { text: "Agent defined", value: "agent" as const },
+  { text: "Disabled", value: "disabled" as const }
+];
+
+export const LabelRightContent = () => {
+  const [limitMode, setlimitMode] = useState<limitMode>("static");
+
+  return (
+    <div>
+      <VuiFormGroup
+        label="Limit"
+        labelFor="limitInput"
+        helpText="Maximum number of results to return Default: 10"
+        labelRightContent={
+          <VuiSelect
+            size="s"
+            options={limitModeOptions}
+            value={limitMode}
+            onChange={(event) => setlimitMode(event.target.value as limitMode)}
+          />
+        }
+      >
+        <VuiTextInput id="limitInput" value="5" onChange={() => undefined} />
+      </VuiFormGroup>
+    </div>
+  );
+};

package/src/docs/pages/formGroup/index.tsx

@@ -2,11 +2,13 @@ import { FormGroup } from "./FormGroup";
 import { NonFormElement } from "./NonFormElement";
 import { NoLabel } from "./NoLabel";
 import { Size } from "./Size";
+import { LabelRightContent } from "./LabelRightContent";
 
 const FormGroupSource = require("!!raw-loader!./FormGroup");
 const NonFormElementSource = require("!!raw-loader!./NonFormElement");
 const NoLabelSource = require("!!raw-loader!./NoLabel");
 const SizeSource = require("!!raw-loader!./Size");
+const LabelRightContentSource = require("!!raw-loader!./LabelRightContent");
 
 export const formGroup = {
   name: "Form Group",
@@ -31,6 +33,11 @@ export const formGroup = {
       name: "Label size",
       component: <Size />,
       source: SizeSource.default.toString()
+    },
+    {
+      name: "With label right aligned content",
+      component: <LabelRightContent />,
+      source: LabelRightContentSource.default.toString()
     }
   ]
 };

package/src/docs/pages/textArea/TextAreaAutoGrow.tsx

@@ -0,0 +1,18 @@
+import { useState } from "react";
+import { VuiTextArea } from "../../../lib";
+
+export const TextAreaAutoGrow = () => {
+  const [value, setValue] = useState<string | undefined>();
+
+  return (
+    <VuiTextArea
+      id="autoGrowTextArea"
+      value={value}
+      onChange={(event) => setValue(event.target.value)}
+      autoGrow
+      rows={1}
+      fullWidth
+      placeholder="Type a few lines — the textarea grows to fit its content"
+    />
+  );
+};

package/src/docs/pages/textArea/index.tsx

@@ -1,8 +1,10 @@
 import { TextArea } from "./TextArea";
 import { TextAreaResizeable } from "./TextAreaResizeable";
+import { TextAreaAutoGrow } from "./TextAreaAutoGrow";
 
 const TextAreaSource = require("!!raw-loader!./TextArea");
 const TextAreaResizeableSource = require("!!raw-loader!./TextAreaResizeable");
+const TextAreaAutoGrowSource = require("!!raw-loader!./TextAreaAutoGrow");
 
 export const textArea = {
   name: "Text Area",
@@ -17,6 +19,11 @@ export const textArea = {
       name: "Resizable Text Area",
       component: <TextAreaResizeable />,
       source: TextAreaResizeableSource.default.toString()
+    },
+    {
+      name: "Auto-Grow Text Area",
+      component: <TextAreaAutoGrow />,
+      source: TextAreaAutoGrowSource.default.toString()
     }
   ]
 };