@lotics/ui 23.0.0 → 23.1.1

package/docs/catalog.md

@@ -95,7 +95,14 @@ Batch draft-form state → `useForm`.
 
 ### Edit a record's fields in place
 
-The `Inline*` family: `InlineTextInput`, `InlineNumberInput`, `InlineSelect` (single or
+The `Inline*` family: `InlineTextInput` (**`numberOfLines`** — the line budget for a value a
+reader must read WHOLE rather than recognise at a glance: a payment term, an address, a clause.
+Above 1 the resting box RESERVES that many lines — the full editor height, not the height this
+particular value needs — so clicking in moves neither the field nor anything below it; Enter
+then inserts a newline and the value commits on blur. Both halves matter: a field that only
+goes multiline once focused hides the text from the reader who never clicks, and one that
+reserves less than it opens to shoves the rest of the form down the page on every click),
+`InlineNumberInput`, `InlineSelect` (single or
 `multi`), `InlineMemberSelect`, `InlineDatePicker`, `InlineTimePicker`; a
 READ-ONLY field in that same column uses `InlineStatic` (matches the editor box exactly, no
 input chrome, so it aligns pixel-for-pixel). A stack of labelled field rows lives in
@@ -246,7 +253,11 @@ scoped to that region's focus; the region-wrapper next to `FileDropzone`'s dedic
 "files land without hunting for a dropzone", `FileRow` (a horizontal file/document LINE —
 badge-or-placeholder + name + meta + a composable `trailing` slot for a status badge /
 action / remove; `onPress` makes the whole row a pressable door, `trailing` stays an
-independently-pressable sibling; for checklists & readable lists), `FileBadge` (the two-tone
+independently-pressable sibling; for checklists & readable lists. **`size`** — `sm` (default)
+is the compact attachment line for many files scanned as a list; **`md` is the document-desk
+row** (taller badge, `ListItem` height) for the FEW rows that ARE the section's subject — an
+expected-document checklist, a slot a button fills. A two-row section at `sm` reads as an
+appendix to the page rather than its point), `FileBadge` (the two-tone
 type mark), `FilePreview` / `FileGalleryModal`, `ImageGallery`; picking is `pickFiles`
 (`@lotics/ui/file_picker` — opens the browser picker and resolves the chosen `File[]`, the
 imperative half behind every Add-file CTA); for gated CRUD compose locally with

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "23.0.0",
+  "version": "23.1.1",
   "type": "module",
   "exports": {
     "./vite": {
@@ -266,7 +266,7 @@
   },
   "license": "SEE LICENSE IN LICENSE.md",
   "dependencies": {
-    "@lotics/docx": "^0.1.0",
+    "@lotics/docx": "^0.2.0",
     "@lotics/xlsx": "^0.1.0",
     "ai": "^7.0.30",
     "mdast-util-from-markdown": "^2.0.3",
@@ -275,7 +275,7 @@
     "mdast-util-gfm-table": "^2.0.0",
     "mdast-util-gfm-task-list-item": "^2.0.0",
     "micromark-extension-gfm": "^3.0.0",
-    "pdfjs-dist": "^6.0.227",
+    "pdfjs-dist": "^6.2.108",
     "react-markdown": "^10.0.0"
   },
   "peerDependencies": {

package/src/file_row.tsx

@@ -25,6 +25,14 @@ export interface FileRowProps {
    *  control. An independently-interactive SIBLING: never swallowed by the row
    *  press (a button never nests in the door button). */
   trailing?: React.ReactNode;
+  /**
+   * Row weight. `"sm"` (default) is the compact attachment line — many files
+   * scanned as a list. `"md"` is the DOCUMENT-DESK row: a taller badge and a
+   * `ListItem`-height body, for the few rows that are the surface's subject
+   * rather than an appendix to it — an expected-document checklist, a slot a
+   * button fills. A one-or-two-row section at `sm` reads as an afterthought.
+   */
+  size?: "sm" | "md";
 }
 
 /**
@@ -37,7 +45,17 @@ export interface FileRowProps {
  * a button/menu in it is pressed independently (the door + sibling a11y pattern —
  * see `PressableRow`). For square thumbnail tiles use `FileThumbnailGrid` / `FileGrid`.
  */
-export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress, trailing }: FileRowProps) {
+export function FileRow({
+  name,
+  meta,
+  mimeType,
+  placeholder,
+  isTemplate,
+  onPress,
+  trailing,
+  size = "sm",
+}: FileRowProps) {
+  const md = size === "md";
   const [hovered, setHovered] = useState(false);
   const [pressed, setPressed] = useState(false);
   const { focusVisible, focusProps } = useFocusRing();
@@ -50,7 +68,7 @@ export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress
 
   const content = (
     <>
-      <FileBadge size={30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
+      <FileBadge size={md ? 38 : 30} mimeType={mimeType} placeholder={placeholder} isTemplate={isTemplate} />
       <View style={styles.text}>
         <Text size="sm" weight="medium" numberOfLines={1}>
           {name}
@@ -66,7 +84,7 @@ export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress
 
   if (!onPress) {
     return (
-      <View style={styles.row}>
+      <View style={[styles.row, md && styles.rowMd]}>
         {content}
         {trailing}
       </View>
@@ -75,7 +93,12 @@ export function FileRow({ name, meta, mimeType, placeholder, isTemplate, onPress
 
   return (
     <View
-      style={[styles.pressableRow, hovered && styles.rowHovered, pressed && styles.rowPressed]}
+      style={[
+        styles.pressableRow,
+        md && styles.rowMd,
+        hovered && styles.rowHovered,
+        pressed && styles.rowPressed,
+      ]}
       {...mouseProps}
     >
       <Pressable
@@ -110,6 +133,8 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     ...({ transitionDuration: "0.1s", transitionProperty: "background-color" } as object),
   },
+  // The `ListItem` beat — for a document row that IS the section's subject.
+  rowMd: { minHeight: 56, paddingVertical: 10 },
   rowHovered: { backgroundColor: colors.zinc["50"] },
   rowPressed: { backgroundColor: colors.zinc["100"] },
   // The accessible "Open" door — fills the row left of the trailing sibling.

package/src/inline_edit.tsx

@@ -7,7 +7,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { FocusRingPressable } from "./focus_ring_pressable";
 import { colors } from "./colors";
 import { FOCUS_RING, CONTROL_RADIUS, HOVER_BORDER, CONTROL_TRANSITION } from "./control_surface";
-import { fontFamilyRegular, getInputTextStyle, getTextColor, type TextColor } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight, getTextColor, type TextColor } from "./text_utils";
 import { getInteractionModality } from "./interaction_modality";
 import { shouldOpenOnFocus, shouldRestoreFocusOnClose } from "./inline_focus";
 import { trackCommit } from "./pending_commits";
@@ -160,6 +160,14 @@ interface InlineEditFrameProps {
   struck?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
+  /**
+   * How many lines the RESTING value may occupy before it truncates. Default 1.
+   * Raise it for a value a reader has to read whole — a payment term, an
+   * address — rather than recognise at a glance; the editor should open to the
+   * same height so the row does not reflow on click.
+   */
+  numberOfLines?: number;
+
   /** Right-aligned rest affordance shown in VIEW mode (e.g. a clock for a time
    *  field) — a hover-independent cue the field opens a picker. Omit for plain
    *  text/number inputs (typing IS the affordance). */
@@ -187,15 +195,16 @@ function fieldContent(o: {
   struck?: boolean;
   tone?: TextColor;
   trailing?: ReactNode;
+  numberOfLines?: number;
 }) {
-  const { display, placeholder, struck, tone, trailing } = o;
+  const { display, placeholder, struck, tone, trailing, numberOfLines } = o;
   const isEmptyString = typeof display === "string" && display === "";
   return (
     <>
       {isEmptyString && placeholder != null && typeof placeholder !== "string" ? (
         <View style={styles.viewNode}>{placeholder}</View>
       ) : typeof display === "string" ? (
-        <Text numberOfLines={1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null]}>
+        <Text numberOfLines={numberOfLines ?? 1} style={[viewTextStyle, display ? null : styles.placeholder, struck ? styles.struck : null, tone && display && !struck ? { color: getTextColor(tone) } : null]}>
           {display || (typeof placeholder === "string" ? placeholder : "") || "—"}
         </Text>
       ) : (
@@ -301,6 +310,14 @@ interface InlineEditViewProps {
   accessibilityLabel?: string;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
+  /**
+   * How many lines the RESTING value may occupy before it truncates. Default 1.
+   * Raise it for a value a reader has to read whole — a payment term, an
+   * address — rather than recognise at a glance; the editor should open to the
+   * same height so the row does not reflow on click.
+   */
+  numberOfLines?: number;
+
   /**
    * A handle on the FIELD's outer box, for a caller that anchors an overlay to
    * it — a select's popover inherits the trigger's width, and with `actions` the
@@ -355,8 +372,31 @@ interface InlineEditViewProps {
  * the overlay trigger for the select/date inline editors (it forwards ref +
  * onPress to a `PopoverTrigger`).
  */
+/**
+ * The resting box for a MULTI-LINE field.
+ *
+ * A field that changes size when you click it moves everything below it, and on
+ * a record surface that is the whole form jumping under the pointer. So the box
+ * must be identical in both modes — which means the RESTING box reserves the
+ * editor's full height, not the height this particular value happens to need.
+ * `TextInputField` sizes a multiline input to `numberOfLines * lineHeight + 16`;
+ * this reproduces that number exactly, and top-aligns the text the way a
+ * textarea does, so neither the box nor the first line moves.
+ *
+ * Single-line fields are untouched: `INLINE_CONTROL_HEIGHT` already equals the
+ * input's own height, which is why they never had this bug.
+ */
+function multilineBox(numberOfLines: number | undefined): ViewStyle | null {
+  if (numberOfLines == null || numberOfLines <= 1) return null;
+  return {
+    minHeight: getMultilineInputHeight(numberOfLines, false),
+    alignItems: "flex-start",
+    paddingVertical: 8,
+  };
+}
+
 export function InlineEditView(props: InlineEditViewProps) {
-  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef } = props;
+  const { display, placeholder, onPress, disabled, accessibilityLabel, trailing, actions, active, struck, variant = "framed", tone, onFocus, ref, anchorRef, numberOfLines } = props;
   // Stop the press here so an inline editor nested in a pressable row (a task
   // row that expands on press) edits the field instead of triggering the row.
   const handlePress = onPress
@@ -365,7 +405,7 @@ export function InlineEditView(props: InlineEditViewProps) {
         onPress();
       }
     : undefined;
-  const content = fieldContent({ display, placeholder, struck, tone, trailing });
+  const content = fieldContent({ display, placeholder, struck, tone, trailing, numberOfLines });
   const surface = fieldSurface({ variant, disabled, active });
 
   // WITH VERBS: the shell owns the surface, the pressable is just the value
@@ -387,7 +427,7 @@ export function InlineEditView(props: InlineEditViewProps) {
           onFocus={onFocus}
           accessibilityRole="button"
           accessibilityLabel={accessibilityLabel}
-          style={styles.viewInner}
+          style={[styles.viewInner, multilineBox(numberOfLines)]}
         >
           {content}
         </Pressable>
@@ -407,7 +447,7 @@ export function InlineEditView(props: InlineEditViewProps) {
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel}
       userSelect="none"
-      style={(state) => surface(state.hovered ?? false)}
+      style={(state) => [surface(state.hovered ?? false), multilineBox(numberOfLines)]}
     >
       {content}
     </FocusRingPressable>
@@ -442,6 +482,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
     variant,
     affordance,
     actions,
+    numberOfLines,
   } = props;
 
   const viewRef = useRef<View>(null);
@@ -482,6 +523,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
         accessibilityLabel={accessibilityLabel}
         struck={struck}
         trailing={affordance}
+        numberOfLines={numberOfLines}
       />
     );
   }
@@ -523,7 +565,7 @@ export function InlineEditFrame(props: InlineEditFrameProps) {
                   accessibilityLabel={accessibilityLabel}
                   style={styles.viewInner}
                 >
-                  {fieldContent({ display, placeholder, struck, trailing: affordance })}
+                  {fieldContent({ display, placeholder, struck, trailing: affordance, numberOfLines })}
                 </Pressable>
               )}
             </InlineFieldShell>

package/src/inline_text_input.tsx

@@ -17,6 +17,14 @@ export interface InlineTextInputProps {
   struck?: boolean;
   /** How much frame shows at rest — see {@link InlineEditVariant}. Default "framed". */
   variant?: InlineEditVariant;
+  /**
+   * Line budget for a value a reader has to read WHOLE rather than recognise —
+   * a payment term, an address, a clause. Default 1 (the single-line field).
+   * Above 1 the resting value wraps to that many lines AND the editor opens
+   * multiline at the same height, so the row does not reflow on click. Enter
+   * then inserts a newline; the field commits on blur (or the ✓ in "buttons").
+   */
+  numberOfLines?: number;
   accessibilityLabel?: string;
   /** Verbs on the field's surface — an `InlineButton` Copy on a reference a reader
    *  quotes elsewhere. See `InlineEditView.actions`: rendered in BOTH modes so the
@@ -32,16 +40,18 @@ export interface InlineTextInputProps {
  * value in a dense record / detail surface.
  */
 export function InlineTextInput(props: InlineTextInputProps) {
-  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions } = props;
+  const { value, onSave, placeholder, controls = "blur", disabled, struck, accessibilityLabel , variant, actions, numberOfLines } = props;
+  const multiline = (numberOfLines ?? 1) > 1;
   const edit = useInlineEdit<string>({ value, onSave });
 
   const onKeyPress = useCallback(
     (e: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
       const key = e.nativeEvent.key;
       if (key === "Escape") edit.cancel();
-      else if (key === "Enter") void edit.commit();
+      // On a multiline field Enter is a NEWLINE; the value commits on blur.
+      else if (key === "Enter" && !multiline) void edit.commit();
     },
-    [edit],
+    [edit, multiline],
   );
 
   // Commit on blur (the ergonomic default for moving through a form). In
@@ -66,6 +76,7 @@ export function InlineTextInput(props: InlineTextInputProps) {
       disabled={disabled}
       struck={struck}
       variant={variant}
+      numberOfLines={numberOfLines}
       accessibilityLabel={accessibilityLabel}
       actions={actions}
     >
@@ -75,6 +86,8 @@ export function InlineTextInput(props: InlineTextInputProps) {
         onBlur={onBlur}
         onKeyPress={onKeyPress}
         autoFocus
+        multiline={multiline}
+        numberOfLines={numberOfLines}
         placeholder={placeholder}
         accessibilityLabel={accessibilityLabel}
         // With verbs on the field, the FRAME owns the surface and the ring.

package/src/input_metrics.ts

@@ -0,0 +1,17 @@
+/** Vertical breathing room inside an input, per side. */
+export const INPUT_VERTICAL_PADDING = 8;
+
+/**
+ * The height a MULTI-LINE input occupies, for `numberOfLines` lines of text.
+ *
+ * One formula with two callers on purpose: `TextInputField` sizes the editor
+ * with it, and an inline field's RESTING box reserves the same number. When
+ * each computed its own, the resting box came out 22px shorter and every click
+ * on a payment-term field shoved the rest of the form down the page.
+ *
+ * RN-free so it can be tested directly — the caller supplies the line height,
+ * which is the only platform-dependent part.
+ */
+export function multilineInputHeight(numberOfLines: number, lineHeight: number): number {
+  return numberOfLines * lineHeight + INPUT_VERTICAL_PADDING * 2;
+}

package/src/text_input_field.tsx

@@ -13,7 +13,7 @@ import { Ref, useCallback, useState } from "react";
 import { Icon, IconName } from "./icon";
 import { IconButton } from "./icon_button";
 import { ShortcutBadge } from "./shortcut_badge";
-import { fontFamilyRegular, getInputLineHeight, getInputTextStyle } from "./text_utils";
+import { fontFamilyRegular, getInputTextStyle, getMultilineInputHeight } from "./text_utils";
 import { useScreenSize } from "./use_screen_size";
 import { useAutoGrowHeight } from "./use_auto_grow_height";
 import { useFormField } from "./form_field";
@@ -84,7 +84,6 @@ export function TextInputField(props: TextInputFieldProps) {
   if (ariaAutocomplete !== undefined) webAriaAttrs["aria-autocomplete"] = ariaAutocomplete;
 
   const { small } = useScreenSize();
-  const lineHeight = getInputLineHeight(small);
   const binding = useFormField();
   // Text-like input: ring on ANY focus (browsers treat typing-capable fields as
   // focus-visible even on pointer focus), so a clicked field shows its ring.
@@ -99,7 +98,7 @@ export function TextInputField(props: TextInputFieldProps) {
 
   const minHeight =
     numberOfLines && numberOfLines > 1
-      ? numberOfLines * lineHeight + 16
+      ? getMultilineInputHeight(numberOfLines, small)
       : undefined;
 
   const autoGrowResult = useAutoGrowHeight({

package/src/text_utils.ts

@@ -1,5 +1,6 @@
 import { Platform, TextStyle } from "react-native";
 import { colors } from "./colors";
+import { multilineInputHeight } from "./input_metrics";
 
 export type TextColor =
   | "default"
@@ -112,6 +113,11 @@ export function getInputTextStyle(): TextStyle {
  *
  * @param isSmallScreen - Whether the screen is small (mobile). Get this from useScreenSize().small
  */
+/** {@link multilineInputHeight} at this platform's input line height. */
+export function getMultilineInputHeight(numberOfLines: number, isSmallScreen: boolean): number {
+  return multilineInputHeight(numberOfLines, getInputLineHeight(isSmallScreen));
+}
+
 export function getInputLineHeight(isSmallScreen: boolean): number {
   if (Platform.OS !== "web") {
     return INPUT_LINE_HEIGHT_DESKTOP;