@lotics/ui 11.7.0 → 11.7.1

package/docs/catalog.md

@@ -408,7 +408,10 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   `selected`/`focused`/`danger`; `role` menuitem|button|option) — popover menus, outline
   rails, section pickers.
 - **`menu_list_item`** — `MenuListItem`: the richer listbox/menu row (title + description +
-  `right`; `selected` vs roving `focused` via `aria-activedescendant`).
+  `right`; `selected` vs roving `focused` via `aria-activedescendant`). No fixed height — it
+  GROWS with its content, and `title` takes a node, so it is what `OptionList`/`Combobox` render
+  for any rich option (custom `renderOptionContent`, or a label over its description); plain
+  label-only rows stay on `MenuButton`.
 - **`floating_action_bar`** — `FloatingActionBar`: the floating bulk-select action bar.
 - **`pressable_row`** — `PressableRow`: THE register row — full-width hover/open wash,
   `selected` (the open record) vs `marked` (ticked in bulk-select), forwards `ref` for

package/docs/data_entry.md

@@ -40,6 +40,11 @@ One per type:
 - **`InlineSelect`** — plain options OR `renderOptionContent`; floats an `OptionList` in a popover
   so the row never grows; the RESTING value renders like its option (`renderOptionContent` by
   default; `renderSelected` overrides) — a colored `OptionBadge`, not just a label.
+  An option ROW may be taller than one line — a rich row (custom `renderOptionContent`, or a
+  label over a `getOptionDescription` line) renders as `MenuListItem`, the listbox row that
+  GROWS with its content; only a plain label row is the fixed-height `MenuButton`. So a short
+  code + the full official name underneath is a supported option shape, not a hack. Reach for it
+  whenever the real name is too long to READ in a list but must stay exact somewhere.
 - **`InlineMemberSelect`** — a `MemberChip` at rest → member picker; the inline twin of
   `MemberSelect`; worked example: `tpl_record`'s "Sales owner" fact.
 - **`InlineDatePicker`** — `format="datetime"` for always-on time; `optionalTime` to let the user

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "11.7.0",
+  "version": "11.7.1",
   "type": "module",
   "exports": {
     "./tokens": "./src/tokens.ts",

package/src/combobox.tsx

@@ -24,6 +24,7 @@ import { Text } from "./text";
 import { Icon, type IconName } from "./icon";
 import { TextInputField } from "./text_input_field";
 import { MenuButton } from "./menu_button";
+import { MenuListItem } from "./menu_list_item";
 import { ActivityIndicator } from "./activity_indicator";
 import { Popover, PopoverContent } from "./popover";
 import type { PickerOption } from "./picker";
@@ -508,37 +509,32 @@ export function ComboboxContent(props: ComboboxContentProps) {
                 const opt = row.option;
                 const desc = !isCustom ? getOptionDescription?.(opt) : undefined;
                 const label = opt.label ?? opt.value;
-                const title =
-                  !isCustom && renderOptionContent ? (
-                    renderOptionContent(opt)
-                  ) : desc ? (
-                    <View>
-                      <Text userSelect="none" numberOfLines={1}>
+                const content = !isCustom ? renderOptionContent?.(opt) : undefined;
+                const shared = {
+                  key: `${row.kind}-${opt.value}`,
+                  nativeID: row.nativeID,
+                  testID: isCustom ? "combobox-custom-option" : `combobox-option-${opt.value}`,
+                  role: "option" as const,
+                  accessibilityLabel: label,
+                  icon: isCustom ? <Icon name="plus" size={16} color={colors.zinc["600"]} /> : undefined,
+                  focused: row.index === list.activeIndex,
+                  selected: row.selected,
+                  disabled: opt.disabled,
+                  onPress: () => list.pickRow(row.index),
+                  onHoverIn: () => list.setActiveIndex(row.index, false),
+                };
+                // Rich row (custom content, or a label over its description) → the growing
+                // `MenuListItem`; a plain option stays the fixed-height `MenuButton`.
+                return content || desc ? (
+                  <MenuListItem {...shared} title={content ?? label} description={content ? undefined : desc} />
+                ) : (
+                  <MenuButton
+                    {...shared}
+                    title={
+                      <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
                         {label}
                       </Text>
-                      <Text size="xs" color="zinc-500" numberOfLines={1}>
-                        {desc}
-                      </Text>
-                    </View>
-                  ) : (
-                    <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
-                      {label}
-                    </Text>
-                  );
-                return (
-                  <MenuButton
-                    key={`${row.kind}-${opt.value}`}
-                    nativeID={row.nativeID}
-                    testID={isCustom ? "combobox-custom-option" : `combobox-option-${opt.value}`}
-                    role="option"
-                    accessibilityLabel={label}
-                    icon={isCustom ? <Icon name="plus" size={16} color={colors.zinc["600"]} /> : undefined}
-                    title={title}
-                    focused={row.index === list.activeIndex}
-                    selected={row.selected}
-                    disabled={opt.disabled}
-                    onPress={() => list.pickRow(row.index)}
-                    onHoverIn={() => list.setActiveIndex(row.index, false)}
+                    }
                   />
                 );
               })

package/src/menu_list_item.tsx

@@ -10,7 +10,10 @@ import type { TextColor } from "./text_utils";
 export interface MenuListItemProps {
   ref?: Ref<View>;
   icon?: IconName | React.ReactNode;
-  title: string;
+  /** A plain string gets the row's own title type; a node renders as-is — an option
+   *  whose label is richer than one line of text (a code + its full official name).
+   *  Pass `accessibilityLabel` when the title is a node. */
+  title: React.ReactNode;
   /** Title color. Default ink — set it to mark the row as an action (e.g. a
    *  leading "Browse all" tinted to match its icon). */
   titleColor?: TextColor;
@@ -28,6 +31,8 @@ export interface MenuListItemProps {
   testID?: string;
   /** DOM id, referenced by a combobox input's `aria-activedescendant`. */
   nativeID?: string;
+  /** Required when `title` is a node — the row's accessible name. */
+  accessibilityLabel?: string;
   /** ARIA role. Defaults to `button`; pass `option` for a listbox row. */
   role?: "menuitem" | "button" | "option";
 }
@@ -48,9 +53,15 @@ export function MenuListItem(props: MenuListItemProps) {
     style,
     testID,
     nativeID,
+    accessibilityLabel,
     role = "button",
   } = props;
 
+  const titleText = typeof title === "string" ? title : undefined;
+  const resolvedLabel =
+    accessibilityLabel ??
+    (titleText && description ? `${titleText}, ${description}` : titleText);
+
   const resolvedIcon =
     typeof icon === "string" ? <Icon size={20} name={icon as IconName} /> : icon;
 
@@ -58,9 +69,13 @@ export function MenuListItem(props: MenuListItemProps) {
     <>
       {resolvedIcon}
       <View style={styles.textContainer}>
-        <Text weight="medium" color={titleColor} numberOfLines={1} userSelect="none">
-          {title}
-        </Text>
+        {titleText !== undefined ? (
+          <Text weight="medium" color={titleColor} numberOfLines={1} userSelect="none">
+            {titleText}
+          </Text>
+        ) : (
+          title
+        )}
         {!!description && (
           <Text size="xs" color="zinc-500" numberOfLines={1} userSelect="none">
             {description}
@@ -89,7 +104,7 @@ export function MenuListItem(props: MenuListItemProps) {
         disabled={disabled}
         style={containerStyle}
         role={role}
-        accessibilityLabel={description ? `${title}, ${description}` : title}
+        accessibilityLabel={resolvedLabel}
         aria-selected={selected || undefined}
         aria-disabled={disabled || undefined}
       >

package/src/option_list.tsx

@@ -5,6 +5,7 @@ import { Text } from "./text";
 import { Icon } from "./icon";
 import { Checkbox } from "./checkbox";
 import { MenuButton } from "./menu_button";
+import { MenuListItem } from "./menu_list_item";
 import { Button } from "./button";
 import { TextLink } from "./text_link";
 import { ActivityIndicator } from "./activity_indicator";
@@ -119,50 +120,41 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
             const opt = row.option;
             const desc = row.kind === "option" ? getOptionDescription?.(opt) : undefined;
             const label = opt.label ?? opt.value;
-            const title =
-              row.kind === "option" && renderOptionContent ? (
-                renderOptionContent(opt)
-              ) : desc ? (
-                <View>
-                  <Text userSelect="none" numberOfLines={1}>
+            const content = row.kind === "option" ? renderOptionContent?.(opt) : undefined;
+            const shared = {
+              key: `${row.kind}-${opt.value}`,
+              nativeID: row.nativeID,
+              testID: isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`,
+              role: "option" as const,
+              accessibilityLabel: isCustom ? label : (opt.label ?? String(opt.value)),
+              icon: isCustom ? (
+                <Icon name="plus" size={16} color={colors.zinc["600"]} />
+              ) : props.multi && row.kind === "option" ? (
+                <Checkbox checked={row.selected} />
+              ) : undefined,
+              right:
+                !props.multi && row.selected ? (
+                  <Icon name="check" size={18} color={colors.zinc["950"]} />
+                ) : undefined,
+              focused: row.index === list.activeIndex,
+              disabled: opt.disabled,
+              onPress: () => list.pickRow(row.index),
+              onHoverIn: () => list.setActiveIndex(row.index, false),
+              style: styles.option,
+            };
+            // A row that carries more than a label — custom content, or a label over its
+            // description — is `MenuListItem`: the listbox row that GROWS. `MenuButton` is
+            // the fixed-height single-line menu row, and stays that for plain options.
+            return content || desc ? (
+              <MenuListItem {...shared} title={content ?? label} description={content ? undefined : desc} />
+            ) : (
+              <MenuButton
+                {...shared}
+                title={
+                  <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
                     {label}
                   </Text>
-                  <Text size="xs" color="zinc-500" numberOfLines={1}>
-                    {desc}
-                  </Text>
-                </View>
-              ) : (
-                <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>
-                  {label}
-                </Text>
-              );
-            return (
-              <MenuButton
-                key={`${row.kind}-${opt.value}`}
-                nativeID={row.nativeID}
-                testID={
-                  isCustom ? "option-list-custom" : opt.testID || `picker-option-${opt.value}`
-                }
-                role="option"
-                accessibilityLabel={isCustom ? label : (opt.label ?? String(opt.value))}
-                icon={
-                  isCustom ? (
-                    <Icon name="plus" size={16} color={colors.zinc["600"]} />
-                  ) : props.multi && row.kind === "option" ? (
-                    <Checkbox checked={row.selected} />
-                  ) : undefined
-                }
-                title={title}
-                right={
-                  !props.multi && row.selected ? (
-                    <Icon name="check" size={18} color={colors.zinc["950"]} />
-                  ) : undefined
                 }
-                focused={row.index === list.activeIndex}
-                disabled={opt.disabled}
-                onPress={() => list.pickRow(row.index)}
-                onHoverIn={() => list.setActiveIndex(row.index, false)}
-                style={styles.option}
               />
             );
           })