@lattice-ui/textarea 0.3.2 → 0.4.1

package/.turbo/turbo-build.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/textarea@0.4.1 build C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\textarea
+> rbxtsc -p tsconfig.json
+

package/.turbo/turbo-typecheck.log

@@ -0,0 +1,4 @@
+
+> @lattice-ui/textarea@0.4.1 typecheck C:\Users\retur\OneDrive\Desktop\Workspace\rojo\lattice-ui\packages\textarea
+> tsc -p tsconfig.typecheck.json
+

package/out/Textarea/TextareaInput.luau

@@ -11,15 +11,32 @@ local function toTextBox(instance)
 	end
 	return instance
 end
+local function resolveVerticalPadding(textBox)
+	local verticalPadding = 0
+	for _, child in textBox:GetChildren() do
+		if not child:IsA("UIPadding") then
+			continue
+		end
+		verticalPadding += child.PaddingTop.Offset + child.PaddingBottom.Offset
+		verticalPadding += math.floor(child.PaddingTop.Scale * textBox.AbsoluteSize.Y)
+		verticalPadding += math.floor(child.PaddingBottom.Scale * textBox.AbsoluteSize.Y)
+	end
+	return if verticalPadding > 0 then verticalPadding else 14
+end
+local function resolveLineHeight(textBox, explicitLineHeight)
+	if explicitLineHeight ~= nil then
+		return math.max(1, explicitLineHeight)
+	end
+	return math.max(1, math.ceil(textBox.TextSize * 1.2))
+end
+local function resolveMeasuredRows(textBox, lineHeight)
+	local textBoundsHeight = math.max(lineHeight, textBox.TextBounds.Y)
+	return math.max(1, math.ceil(textBoundsHeight / lineHeight))
+end
 local function TextareaInput(props)
 	local textareaContext = useTextareaContext()
 	local disabled = textareaContext.disabled or props.disabled == true
 	local readOnly = textareaContext.readOnly or props.readOnly == true
-	local _condition = props.lineHeight
-	if _condition == nil then
-		_condition = 18
-	end
-	local lineHeight = _condition
 	local setInputRef = React.useCallback(function(instance)
 		textareaContext.inputRef.current = toTextBox(instance)
 	end, { textareaContext.inputRef })
@@ -27,17 +44,21 @@ local function TextareaInput(props)
 		if not textareaContext.autoResize then
 			return nil
 		end
+		local lineHeight = resolveLineHeight(textBox, props.lineHeight)
+		local verticalPadding = resolveVerticalPadding(textBox)
+		local measuredRows = resolveMeasuredRows(textBox, lineHeight)
 		local height = resolveTextareaHeight(textBox.Text, {
 			lineHeight = lineHeight,
 			minRows = textareaContext.minRows,
 			maxRows = textareaContext.maxRows,
-			verticalPadding = 14,
+			verticalPadding = verticalPadding,
+			measuredRows = measuredRows,
 		})
 		local currentSize = textBox.Size
 		if currentSize.Y.Offset ~= height or currentSize.Y.Scale ~= 0 then
 			textBox.Size = UDim2.fromOffset(currentSize.X.Offset, height)
 		end
-	end, { lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows })
+	end, { props.lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows })
 	local handleTextChanged = React.useCallback(function(textBox)
 		if disabled or readOnly then
 			if textBox.Text ~= textareaContext.value then
@@ -48,6 +69,11 @@ local function TextareaInput(props)
 		end
 		textareaContext.setValue(textBox.Text)
 		applyAutoResize(textBox)
+		task.defer(function()
+			if textareaContext.inputRef.current == textBox then
+				applyAutoResize(textBox)
+			end
+		end)
 	end, { applyAutoResize, disabled, readOnly, textareaContext })
 	local handleFocusLost = React.useCallback(function(textBox)
 		if disabled then
@@ -61,6 +87,11 @@ local function TextareaInput(props)
 			return nil
 		end
 		applyAutoResize(input)
+		task.defer(function()
+			if textareaContext.inputRef.current == input then
+				applyAutoResize(input)
+			end
+		end)
 	end, { applyAutoResize, textareaContext.inputRef, textareaContext.value })
 	local sharedProps = {
 		Active = not disabled,

package/out/Textarea/autoResize.d.ts

@@ -3,5 +3,6 @@ export type TextareaAutoResizeOptions = {
     maxRows?: number;
     lineHeight: number;
     verticalPadding?: number;
+    measuredRows?: number;
 };
 export declare function resolveTextareaHeight(text: string, options: TextareaAutoResizeOptions): number;

package/out/Textarea/autoResize.luau

@@ -14,7 +14,9 @@ local function resolveTextareaHeight(text, options)
 		_condition = 0
 	end
 	local verticalPadding = math.max(0, _condition)
-	local naturalRows = countLines(text)
+	local newlineRows = countLines(text)
+	local measuredRows = if options.measuredRows ~= nil then math.max(1, math.floor(options.measuredRows)) else newlineRows
+	local naturalRows = math.max(newlineRows, measuredRows)
 	local clampedRows = if maxRows ~= nil then math.clamp(naturalRows, minRows, maxRows) else math.max(minRows, naturalRows)
 	return clampedRows * lineHeight + verticalPadding
 end

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@lattice-ui/textarea",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "private": false,
   "main": "out/init.luau",
   "types": "out/index.d.ts",
   "dependencies": {
-    "@lattice-ui/core": "0.3.2"
+    "@lattice-ui/core": "0.4.1"
   },
   "devDependencies": {
     "@rbxts/react": "17.3.7-ts.1",

package/src/Textarea/TextareaInput.tsx

@@ -11,11 +11,39 @@ function toTextBox(instance: Instance | undefined) {
   return instance;
 }
 
+function resolveVerticalPadding(textBox: TextBox) {
+  let verticalPadding = 0;
+
+  for (const child of textBox.GetChildren()) {
+    if (!child.IsA("UIPadding")) {
+      continue;
+    }
+
+    verticalPadding += child.PaddingTop.Offset + child.PaddingBottom.Offset;
+    verticalPadding += math.floor(child.PaddingTop.Scale * textBox.AbsoluteSize.Y);
+    verticalPadding += math.floor(child.PaddingBottom.Scale * textBox.AbsoluteSize.Y);
+  }
+
+  return verticalPadding > 0 ? verticalPadding : 14;
+}
+
+function resolveLineHeight(textBox: TextBox, explicitLineHeight: number | undefined) {
+  if (explicitLineHeight !== undefined) {
+    return math.max(1, explicitLineHeight);
+  }
+
+  return math.max(1, math.ceil(textBox.TextSize * 1.2));
+}
+
+function resolveMeasuredRows(textBox: TextBox, lineHeight: number) {
+  const textBoundsHeight = math.max(lineHeight, textBox.TextBounds.Y);
+  return math.max(1, math.ceil(textBoundsHeight / lineHeight));
+}
+
 export function TextareaInput(props: TextareaInputProps) {
   const textareaContext = useTextareaContext();
   const disabled = textareaContext.disabled || props.disabled === true;
   const readOnly = textareaContext.readOnly || props.readOnly === true;
-  const lineHeight = props.lineHeight ?? 18;
 
   const setInputRef = React.useCallback(
     (instance: Instance | undefined) => {
@@ -30,11 +58,16 @@ export function TextareaInput(props: TextareaInputProps) {
         return;
       }
 
+      const lineHeight = resolveLineHeight(textBox, props.lineHeight);
+      const verticalPadding = resolveVerticalPadding(textBox);
+      const measuredRows = resolveMeasuredRows(textBox, lineHeight);
+
       const height = resolveTextareaHeight(textBox.Text, {
         lineHeight,
         minRows: textareaContext.minRows,
         maxRows: textareaContext.maxRows,
-        verticalPadding: 14,
+        verticalPadding,
+        measuredRows,
       });
 
       const currentSize = textBox.Size;
@@ -42,7 +75,7 @@ export function TextareaInput(props: TextareaInputProps) {
         textBox.Size = UDim2.fromOffset(currentSize.X.Offset, height);
       }
     },
-    [lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows],
+    [props.lineHeight, textareaContext.autoResize, textareaContext.maxRows, textareaContext.minRows],
   );
 
   const handleTextChanged = React.useCallback(
@@ -58,6 +91,11 @@ export function TextareaInput(props: TextareaInputProps) {
 
       textareaContext.setValue(textBox.Text);
       applyAutoResize(textBox);
+      task.defer(() => {
+        if (textareaContext.inputRef.current === textBox) {
+          applyAutoResize(textBox);
+        }
+      });
     },
     [applyAutoResize, disabled, readOnly, textareaContext],
   );
@@ -80,6 +118,11 @@ export function TextareaInput(props: TextareaInputProps) {
     }
 
     applyAutoResize(input);
+    task.defer(() => {
+      if (textareaContext.inputRef.current === input) {
+        applyAutoResize(input);
+      }
+    });
   }, [applyAutoResize, textareaContext.inputRef, textareaContext.value]);
 
   const sharedProps = {

package/src/Textarea/autoResize.ts

@@ -3,6 +3,7 @@ export type TextareaAutoResizeOptions = {
   maxRows?: number;
   lineHeight: number;
   verticalPadding?: number;
+  measuredRows?: number;
 };
 
 function countLines(text: string) {
@@ -19,7 +20,9 @@ export function resolveTextareaHeight(text: string, options: TextareaAutoResizeO
   const lineHeight = math.max(1, options.lineHeight);
   const verticalPadding = math.max(0, options.verticalPadding ?? 0);
 
-  const naturalRows = countLines(text);
+  const newlineRows = countLines(text);
+  const measuredRows = options.measuredRows !== undefined ? math.max(1, math.floor(options.measuredRows)) : newlineRows;
+  const naturalRows = math.max(newlineRows, measuredRows);
   const clampedRows =
     maxRows !== undefined ? math.clamp(naturalRows, minRows, maxRows) : math.max(minRows, naturalRows);