@veracity/vui/dist/textarea/textarea.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { isString } from "../utils/assertion.js";
import { filterUndefined } from "../utils/object.js";
import { cs } from "../utils/styles.js";
import { helpTextMargin, helpTextSize, inputColors } from "../input/consts.js";
import { omitThemingProps, useStyleConfig } from "../core/theme.js";
import styled from "../core/styled.js";
import vui from "../core/vui.js";
import { Box } from "../box/box.js";
import { T } from "../t/t.js";
import { HelpText } from "../input/helpText.js";
import { Label } from "../label/label.js";
import { getInitialCount } from "./helpers.js";
import { useEffect, useId, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/textarea/textarea.tsx
const TextareaTextarea = styled.textareaBox`
  border-radius: none;
  border-width: 1px;
  outline: none;
  padding: 1;
  resize: none;
  min-height: 80px;
  transition-duration: fast;
  width: 100%;

  &[aria-disabled='true'] {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: sandstone.79;
    border-color: sandstone.79;
  }
`;
const TextareaBase = styled.divBox`
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
`;
/**
* Displays a textarea element wrapped in a div to allow extra content, like counter.
* Forwards many relevant props to the inner textarea. Exposes some props to the children via context.
*/
const Textarea = vui((props, ref) => {
	const { autoFocus, ariaLabel, className, colorScheme: colorSchemeProp, cols, defaultValue, disabled, errorText, id: idProp, helpText, label, labelMarkOptional, labelTooltipText, maxLength, name, onBlur, onChange: onChangeProp, onFocus, placeholder, readOnly, required, resize = "none", rows, showCount, textareaProps = {}, textareaRef, value, ...rest } = omitThemingProps(props);
	const generatedId = useId();
	const [count, setCount] = useState(() => getInitialCount(props));
	const [valueInternal, setValueInternal] = useState(defaultValue);
	const id = idProp || generatedId;
	const styles = useStyleConfig("Textarea", props);
	function onChange(e) {
		setValueInternal(e.target.value);
		setCount(e.target.value.length);
		onChangeProp?.(e);
	}
	const aliasedProps = filterUndefined({ "aria-disabled": disabled });
	const textareaAliasedProps = filterUndefined({
		"aria-disabled": disabled,
		"aria-label": ariaLabel,
		bg: readOnly ? "sandstone.97" : void 0,
		borderColor: readOnly ? "sandstone.55" : void 0
	});
	useEffect(() => {
		setValueInternal(value);
		setCount(value?.toString()?.length ? `${value}`.length : 0);
	}, [value]);
	return /* @__PURE__ */ jsxs(Box, {
		className: "vui-textareaContainer",
		column: true,
		ref,
		...rest,
		children: [
			isString(label) ? /* @__PURE__ */ jsx(Label, {
				"aria-disabled": disabled,
				className: "vui-textareaLabel",
				htmlFor: id,
				markAsOptional: labelMarkOptional,
				mb: .5,
				text: label,
				tooltipText: labelTooltipText,
				...styles.label
			}) : label,
			/* @__PURE__ */ jsxs(TextareaBase, {
				className: cs("vui-textarea", className),
				...styles.container,
				...aliasedProps,
				children: [/* @__PURE__ */ jsx(TextareaTextarea, {
					className: "vui-textareaTextarea",
					ref: textareaRef,
					autoFocus,
					cols,
					defaultValue,
					disabled,
					id,
					maxLength,
					name,
					onBlur,
					onChange,
					onFocus,
					placeholder,
					readOnly,
					required,
					resize,
					rows,
					value: valueInternal,
					...styles.textarea,
					...textareaAliasedProps,
					...textareaProps
				}), showCount && /* @__PURE__ */ jsxs(T, {
					className: "vui-textareaCount",
					color: maxLength && count > maxLength ? inputColors.error : inputColors.helpText,
					position: "absolute",
					right: 0,
					size: "sm",
					top: "calc(100% + 1px)",
					children: [
						count,
						" ",
						maxLength ? `/ ${maxLength}` : null
					]
				})]
			}),
			!!helpText && /* @__PURE__ */ jsx(HelpText, {
				size: helpTextSize["lg"],
				children: helpText
			}),
			!!errorText && /* @__PURE__ */ jsx(HelpText, {
				isError: true,
				mr: showCount ? "60px" : void 0,
				size: helpTextSize["lg"],
				children: errorText
			})
		]
	});
});
Textarea.displayName = "Textarea";

//#endregion
export { Textarea, Textarea as default, TextareaBase };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=textarea.js.map