@klyftig/mobile-ui 1.3.10 → 1.3.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@klyftig/mobile-ui",
-  "version": "1.3.10",
+  "version": "1.3.13",
   "scripts": {
     "pack-install": "npm pack && mv klyftig-ui-*.tgz /tmp/klyftig-ui-local.tgz && cd ../../mobile && npm install /tmp/klyftig-ui-local.tgz"
   },

package/src/components/GlassInput.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useCallback, useEffect, memo } from 'react';
+import React, { useState, useCallback, memo } from 'react';
 import { View, TextInput as RNTextInput, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import type { NativeSyntheticEvent, TextInputContentSizeChangeEventData } from 'react-native';
 import { MaterialCommunityIcons as Icon } from '@expo/vector-icons';
 import { useTheme } from '../hooks/useTheme';
 
@@ -13,6 +14,13 @@ interface GlassInputProps {
   autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
   multiline?: boolean;
   numberOfLines?: number;
+  // Only meaningful with multiline. Instead of `inputWrapperMultiline`'s fixed
+  // minHeight (96, a sensible default for a notes/description field), sizes
+  // the box to the actual content: compact for one short line, growing up to
+  // `numberOfLines` only when the value actually needs it. For a title-style
+  // field (e.g. a composite dish name) where most values are short, a fixed
+  // multi-line reservation looks oversized.
+  autoGrow?: boolean;
   // Off by default for fields where iOS would otherwise replace partially-edited
   // multi-word values with its autocorrect suggestion and snap the caret to end.
   autoCorrect?: boolean;
@@ -35,6 +43,13 @@ interface GlassInputProps {
 // so the caret follows taps and typing normally.
 const SELECTION_START = { start: 0, end: 0 } as const;
 
+// Matches `input`'s fontSize: 16 at RN's default ~1.2 line-height ratio.
+// Used only by autoGrow to clamp the measured content height per line.
+const LINE_HEIGHT = 20;
+// inputWrapperAutoGrow's paddingVertical (12 top + 12 bottom) — added on top
+// of the measured text height to get the wrapper's total minHeight.
+const AUTO_GROW_PADDING_V = 24;
+
 const GlassInputComponent: React.FC<GlassInputProps> = ({
   label,
   value,
@@ -56,29 +71,24 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
   selectTextOnFocus,
   multiline = false,
   numberOfLines,
+  autoGrow = false,
 }) => {
   const { colors } = useTheme();
   const [isSecure, setIsSecure] = useState(secureTextEntry);
   const [isFocused, setIsFocused] = useState(false);
-  // Reinforces the `selection` prop below: on Android, setting `selection` on
-  // the SAME render as a `value` that's longer than the field's width is
-  // often ignored — the native EditText hasn't measured/laid out the text yet,
-  // so it doesn't know where to scroll to reveal position 0. `setNativeProps`
-  // does NOT reliably fix this on Android either (selection isn't reliably
-  // forwarded through that imperative path for TextInput) — it has to be a
-  // genuine PROP change through normal React reconciliation to hit the native
-  // "set selection and scroll" command. A fresh object (new reference) fed
-  // through state a tick after mount, once layout has committed, does that.
-  const [delayedSelectionStart, setDelayedSelectionStart] = useState<typeof SELECTION_START | undefined>(undefined);
+  const [contentHeight, setContentHeight] = useState(0);
+  const isAutoGrow = multiline && autoGrow;
+
+  const handleContentSizeChange = useCallback((e: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => {
+    setContentHeight(e.nativeEvent.contentSize.height);
+  }, []);
 
-  useEffect(() => {
-    setDelayedSelectionStart(undefined);
-    if (isFocused || multiline) return;
-    const id = setTimeout(() => {
-      setDelayedSelectionStart({ start: 0, end: 0 });
-    }, 50);
-    return () => clearTimeout(id);
-  }, [value, isFocused, multiline]);
+  // Text-only height (no padding) — the wrapper's own paddingVertical is
+  // added on top via inputWrapperAutoGrow, matching how inputWrapperMultiline
+  // composes minHeight with its own paddingVertical for the fixed variant.
+  const growTextHeight = numberOfLines
+    ? Math.min(Math.max(contentHeight, LINE_HEIGHT), numberOfLines * LINE_HEIGHT)
+    : Math.max(contentHeight, LINE_HEIGHT);
 
   const handleFocus = useCallback(() => {
     setIsFocused(true);
@@ -106,7 +116,13 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
           disabled && styles.inputContainerDisabled,
         ]}
       >
-        <View style={[styles.inputWrapper, multiline && styles.inputWrapperMultiline]}>
+        <View
+          style={[
+            styles.inputWrapper,
+            multiline && !isAutoGrow && styles.inputWrapperMultiline,
+            isAutoGrow && [styles.inputWrapperAutoGrow, { minHeight: growTextHeight + AUTO_GROW_PADDING_V }],
+          ]}
+        >
           {icon && (
             <Icon name={icon} size={20} color="#9B9B9B" style={styles.leftIcon} />
           )}
@@ -123,8 +139,9 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
             editable={!disabled}
             onFocus={handleFocus}
             onBlur={handleBlur}
+            onContentSizeChange={isAutoGrow ? handleContentSizeChange : undefined}
             selectTextOnFocus={selectTextOnFocus}
-            selection={!isFocused && !multiline ? (delayedSelectionStart ?? SELECTION_START) : undefined}
+            selection={!isFocused && !multiline ? SELECTION_START : undefined}
             multiline={multiline}
             numberOfLines={numberOfLines}
             textAlignVertical={multiline ? 'top' : undefined}
@@ -137,7 +154,8 @@ const GlassInputComponent: React.FC<GlassInputProps> = ({
               styles.input,
               icon && styles.inputWithLeftIcon,
               (rightText || showPasswordToggle) && styles.inputWithRightIcon,
-              multiline && styles.inputMultiline,
+              multiline && !isAutoGrow && styles.inputMultiline,
+              isAutoGrow && [styles.inputAutoGrow, { height: growTextHeight }],
             ]}
           />
           {rightText && (
@@ -206,6 +224,17 @@ const styles = StyleSheet.create({
     minHeight: 72,
     paddingTop: 4,
   },
+  // minHeight is applied inline (computed from measured content) — see
+  // isAutoGrow in the component.
+  inputWrapperAutoGrow: {
+    height: undefined,
+    paddingVertical: 12,
+    alignItems: 'flex-start',
+  },
+  // height is applied inline (computed from measured content).
+  inputAutoGrow: {
+    paddingTop: 0,
+  },
   leftIcon: {
     marginRight: 12,
   },