@lotics/ui 11.7.0 → 11.7.2

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/composition.md

@@ -254,7 +254,8 @@ an empty overlay with no content to derive a name from.
 
 Make a register SELECTABLE with the `Table` `leading` gutter + `selectAll` slot — a
 `CheckboxInput` per `TableRow` (its `leading` slot) + a select-all in the header band, the ticked
-rows `marked`, paired with a `FloatingActionBar`. The selection state is the **`useSelection()`**
+rows `marked`, paired with a `FloatingActionBar` (its "Clear" escape is locale-resolved — pass
+`clearLabel` only to override it). The selection state is the **`useSelection()`**
 hook (`@lotics/ui/use_selection`: `selected` / `has` / `count` / `toggle` / `setAll` /
 `allSelected` / `indeterminate` / `clear`) — gating which rows CAN be ticked stays with you: pass
 only the selectable ids to `setAll`/`allSelected`/`indeterminate` (a non-selectable row gets a

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.2",
   "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/floating_action_bar.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from "react";
 import { StyleSheet, View } from "react-native";
 import { Button } from "./button";
+import { useLoticsLocale } from "./locale";
 import { Card } from "./card";
 import { Text } from "./text";
 
@@ -11,6 +12,7 @@ export interface FloatingActionBarProps {
   label: string;
   /** Clears the selection — the always-present escape. */
   onClear: () => void;
+  /** Overrides the localized default ("Clear" / "Bỏ chọn"). */
   clearLabel?: string;
   /** The bulk action(s) — a primary `Button` or an "Assign to…" `Popover`. */
   children: ReactNode;
@@ -25,7 +27,8 @@ export interface FloatingActionBarProps {
  * `box-none` wrapper lets clicks fall through everywhere except the bar.
  */
 export function FloatingActionBar(props: FloatingActionBarProps) {
-  const { count, label, onClear, clearLabel = "Clear", children } = props;
+  const loc = useLoticsLocale().floatingActionBar;
+  const { count, label, onClear, clearLabel = loc.clear, children } = props;
   if (count <= 0) return null;
   return (
     <View pointerEvents="box-none" style={styles.wrap}>

package/src/locale.tsx

@@ -36,6 +36,9 @@ export interface LoticsLocale {
   /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
    *  a call site doesn't pass a dimension-specific `clearLabel`. */
   filterChip: { clear: string };
+  /** `FloatingActionBar`: the escape that drops the selection. The COUNT's noun is
+   *  the call site's `label` (it names the rows), so only the escape lives here. */
+  floatingActionBar: { clear: string };
   /** `FormField`: the "Optional" marker shown next to the label when `optional`. */
   formField: { optional: string };
   /** `Drawer`: the record prev/next + close controls (screen-reader names). */
@@ -107,6 +110,7 @@ export const en: LoticsLocale = {
   datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", time: "Time", startTime: "Start time", endTime: "End time", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
   filterChip: { clear: "Clear" },
+  floatingActionBar: { clear: "Clear" },
   formField: { optional: "Optional" },
   drawer: { previous: "Previous record", next: "Next record", close: "Close" },
   inline: { saveError: "Couldn't save. Try again.", save: "Save", cancel: "Cancel" },
@@ -186,6 +190,7 @@ export const vi: LoticsLocale = {
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", addTime: "Thêm giờ", removeTime: "Bỏ giờ", year: "Năm", month: "Tháng", day: "Ngày", hour: "Giờ", minute: "Phút", dayPeriod: "SA/CH" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
   filterChip: { clear: "Xóa" },
+  floatingActionBar: { clear: "Bỏ chọn" },
   formField: { optional: "Tùy chọn" },
   drawer: { previous: "Bản ghi trước", next: "Bản ghi sau", close: "Đóng" },
   inline: { saveError: "Không lưu được. Thử lại.", save: "Lưu", cancel: "Hủy" },

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}
               />
             );
           })