@lotics/ui 46.14.1 → 47.1.0

package/src/inline_slot.tsx

@@ -6,6 +6,10 @@ import { INLINE_CONTROL_HEIGHT } from "./inline_edit";
 export interface InlineSlotProps {
   /** Whatever sits in the value column — a `DiffValue`, a chip, a pair. */
   children: ReactNode;
+  /** Verbs about the value, pinned right ON the slot's surface — the same place
+   *  an editable `Inline*` puts its `actions`, so a static row and an editable
+   *  one carry their verbs on one edge. */
+  actions?: ReactNode;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -32,11 +36,21 @@ export interface InlineSlotProps {
  * NOT for a table cell: a `Table` sets its own row rhythm, and a 40px control
  * band inside one only makes the rows taller.
  */
-export function InlineSlot({ children, style }: InlineSlotProps) {
-  return <View style={[styles.box, style]}>{children}</View>;
+export function InlineSlot({ children, actions, style }: InlineSlotProps) {
+  if (!actions) return <View style={[styles.box, style]}>{children}</View>;
+  return (
+    <View style={[styles.box, styles.withActions, style]}>
+      <View style={styles.grow}>{children}</View>
+      {actions}
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
+  // The value takes the slack and the verbs pin right, so a column of rows —
+  // some with a verb, some without — keeps one right edge.
+  withActions: { flexDirection: "row", alignItems: "center", gap: 8 },
+  grow: { flex: 1, minWidth: 0 },
   // Matches `inline_edit`'s view box exactly (height, radius, padding, 1px
   // transparent border) so the content's baseline aligns with the editors —
   // minus the FocusRingPressable, so it never reads as an interactive control.

package/src/inline_static.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { StyleSheet } from "react-native";
 import { Text } from "./text";
 import { colors } from "./colors";
@@ -28,6 +29,18 @@ export interface InlineStaticProps {
    * misalignment this component exists to prevent, just on the other axis.
    */
   multiline?: boolean;
+  /**
+   * Verbs about THIS value, on the value's own surface — an `InlineButton`, the
+   * same slot every editable `Inline*` exposes.
+   *
+   * A read-only value often still has an act attached to it: look this id up,
+   * copy it, request the change that is gated behind an approval. Without this
+   * slot that verb has nowhere to sit but the row's ground, and an `InlineButton`
+   * outside a field surface is the wrong control (see `catalog.md`
+   * §`inline_button`). A static value is still a field; it just is not editable
+   * in place.
+   */
+  actions?: ReactNode;
 }
 
 /**
@@ -37,15 +50,16 @@ export interface InlineStaticProps {
  * locked value — sits flush in the same column as the editable rows. It is
  * NON-interactive (no hover, no pointer, no focus ring): it reads as a plain
  * value, NOT a disabled input. Pair with `DetailRow` exactly like the `Inline*`
- * editors; wrap it in a `flex:1` View when the row also carries a `trailing`
- * slot, so the value takes the slack and the trailing pins right.
+ * editors. A verb about the value goes in `actions`, on the value's own surface —
+ * `DetailRow` has no trailing slot, and a verb on the row's ground is an
+ * `InlineButton` without a field under it.
  */
 export function InlineStatic(props: InlineStaticProps) {
-  const { value, placeholder, muted, tabular, align = "left", weight, multiline } = props;
+  const { value, placeholder, muted, tabular, align = "left", weight, multiline, actions } = props;
   const isEmpty = value.length === 0;
   const display = isEmpty ? (placeholder ?? "—") : value;
   return (
-    <InlineSlot>
+    <InlineSlot actions={actions}>
       <Text
         numberOfLines={multiline ? undefined : 1}
         tabular={tabular}

package/src/legend_item.tsx

@@ -24,7 +24,10 @@ export function LegendItem(props: LegendItemProps) {
   return (
     <View style={styles.row}>
       <View style={[styles.swatch, { backgroundColor: props.color }]} />
-      <Text size="sm" color="muted">
+      {/* Nhãn phải CO ĐƯỢC. Không có `minWidth: 0` thì một hộp chữ trong hàng
+          flex không bao giờ nhỏ hơn nội dung của nó, nên nó đẩy cả hàng rộng ra
+          và ở màn hẹp hai mục chú giải chồng lên nhau thay vì xuống dòng. */}
+      <Text size="sm" color="muted" style={styles.label}>
         {props.label}
       </Text>
       {props.value !== undefined && <Metric value={props.value} size="sm" />}
@@ -37,7 +40,17 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     gap: SPACE.sm,
+    // 130 là bề ngang MONG MUỐN để vài mục chú giải xếp thành cột đều nhau —
+    // không phải một sàn cứng. Thiếu `flexShrink` thì nó thành sàn thật: ở màn
+    // hẹp hàng không chịu co, và một chú giải bốn chữ vừa bị cắt vừa đè lên
+    // mục bên cạnh. Cùng nhầm lẫn mà `table_fit` đã gỡ một lần — hỏi "còn
+    // dùng được không" ở chỗ đáng ra phải hỏi "còn đọc được không".
     minWidth: 130,
+    flexShrink: 1,
+  },
+  label: {
+    flexShrink: 1,
+    minWidth: 0,
   },
   swatch: {
     width: 8,

package/src/locale.tsx

@@ -1,6 +1,8 @@
 import { createContext, useContext, type ReactNode } from "react";
 import { type DatePickerLabels } from "./date_picker";
 import { type CalendarLabels } from "./date_calendar";
+import { type CalendarViewLabels } from "./calendar/types";
+import { type GanttLabels } from "./gantt/types";
 import { type PaginationLabels } from "./pagination";
 import { type SortHeaderLabels } from "./sort_header";
 import { type ConfidenceLabels } from "./confidence";
@@ -55,6 +57,14 @@ export interface LoticsLocale {
   picker: { emptyOption: string };
   datePicker: DatePickerLabels;
   calendar: CalendarLabels;
+  /** `CalendarView` and its parts — the SCHEDULING surface. Distinct from
+   *  `calendar` above, which is the date PICKER's month grid: two different
+   *  components, two different vocabularies, and the collision is why this one
+   *  carries the longer name. */
+  calendarView: CalendarViewLabels;
+  /** `GanttView` — the zoom switch, the frozen column header, dependency
+   *  announcements and the empty state. */
+  gantt: GanttLabels;
   /** `FilterChip` (and `ColumnFilter`): the generic clear affordance, used when
    *  a call site doesn't pass a dimension-specific `clearLabel`. */
   filterChip: { clear: string };
@@ -327,6 +337,16 @@ export const en: LoticsLocale = {
   picker: { emptyOption: "None" },
   datePicker: { today: "Today", now: "Now", clear: "Clear", done: "Done", openCalendar: "Open calendar", chooseTime: "Choose a time", time: "Time", startTime: "Start time", endTime: "End time", startDate: "Start date", endDate: "End date", addTime: "Add time", removeTime: "Remove time", year: "Year", month: "Month", day: "Day", hour: "Hour", minute: "Minute", dayPeriod: "AM/PM", invalidDate: "Enter a complete date", invalidTime: "Enter a complete time" },
   calendar: { previousMonth: "Previous month", nextMonth: "Next month" },
+  calendarView: {
+    today: "Today", month: "Month", week: "Week", day: "Day", agenda: "Agenda",
+    previous: "Previous", next: "Next", allDay: "all-day",
+    more: (n) => `+${n} more`, noEvents: "Nothing scheduled",
+    addAt: (when) => `Add at ${when}`,
+  },
+  gantt: {
+    day: "Day", week: "Week", month: "Month", task: "Task",
+    empty: "Nothing scheduled",
+  },
   filterChip: { clear: "Clear" },
   floatingActionBar: { clear: "Clear" },
   formField: { optional: "Optional" },
@@ -536,6 +556,16 @@ export const vi: LoticsLocale = {
   picker: { emptyOption: "Không có" },
   datePicker: { today: "Hôm nay", now: "Bây giờ", clear: "Xóa", done: "Xong", openCalendar: "Mở lịch", chooseTime: "Chọn giờ", time: "Giờ", startTime: "Giờ bắt đầu", endTime: "Giờ kết thúc", startDate: "Ngày bắt đầu", endDate: "Ngày 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", invalidDate: "Nhập ngày đầy đủ", invalidTime: "Nhập giờ đầy đủ" },
   calendar: { previousMonth: "Tháng trước", nextMonth: "Tháng sau" },
+  calendarView: {
+    today: "Hôm nay", month: "Tháng", week: "Tuần", day: "Ngày", agenda: "Danh sách",
+    previous: "Trước", next: "Sau", allDay: "cả ngày",
+    more: (n) => `+${n} nữa`, noEvents: "Không có lịch nào",
+    addAt: (when) => `Thêm vào ${when}`,
+  },
+  gantt: {
+    day: "Ngày", week: "Tuần", month: "Tháng", task: "Công việc",
+    empty: "Chưa có việc nào",
+  },
   filterChip: { clear: "Xóa" },
   floatingActionBar: { clear: "Bỏ chọn" },
   formField: { optional: "Tùy chọn" },

package/src/matrix.tsx

@@ -28,6 +28,10 @@ interface MatrixContextValue {
  *  column budget needs the same number the grid renders with — hard-coding it
  *  is how a width budget and the layout drift apart. */
 export const MATRIX_COL_GAP = 3;
+/** Chỗ thở hai bên con số bên trong một ô ma trận. Ô có NỀN, nên con số căn phải
+ *  cần một khoảng với mép nền; dán sát thì nó đọc như bị cắt. Tiêu đề cột cộng
+ *  đúng số này vào `paddingRight` của nó để hai bên kết thúc trên một đường. */
+const MATRIX_CELL_PAD = 6;
 
 const MatrixContext = createContext<MatrixContextValue | null>(null);
 
@@ -319,10 +323,19 @@ const styles = StyleSheet.create({
   },
   cell: {
     flex: 1,
-    minWidth: 52,
+    // 52 + hai lần MATRIX_CELL_PAD: cái đệm mới ăn vào bề ngang, nên sàn tối
+    // thiểu phải cộng thêm đúng ngần ấy, không thì ô chật đi và con số dài nhất
+    // là con số đầu tiên bị ép.
+    minWidth: 52 + MATRIX_CELL_PAD * 2,
     height: 36,
     borderRadius: 4,
     borderWidth: 2,
+    // Con số căn phải trong một ô CÓ NỀN, nên nó cần chỗ thở với mép nền. Trước
+    // đây ô không có đệm ngang nào: chữ số cuối dừng cách mép đúng 2px của cái
+    // viền, và trên một ô tô màu thì nó đọc ra như bị cắt cụt chứ không như căn
+    // phải. Một con số dán vào cạnh khối màu của chính nó là con số trông như
+    // còn nữa mà không hiện ra.
+    paddingHorizontal: MATRIX_CELL_PAD,
     // STRETCH, not center. The figure inside sets `align="right"`, and a Text
     // centred by its parent SHRINK-WRAPS — so it is exactly as wide as its own
     // glyphs and has nothing to align against. Right-aligning the text while
@@ -336,10 +349,11 @@ const styles = StyleSheet.create({
   },
   colCell: {
     flex: 1,
-    minWidth: 52,
-    // Matches the 2px the cell's own border insets its figure by, so a header
-    // and the numbers under it end on ONE x rather than two pixels apart.
-    paddingRight: 2,
+    minWidth: 52 + MATRIX_CELL_PAD * 2,
+    // Khớp với tổng phần ô đẩy con số vào: 2px viền cộng cái đệm ngang. Lệch
+    // một pixel ở đây là tiêu đề cột và dãy số dưới nó kết thúc ở hai đường x
+    // khác nhau — thứ mắt bắt được ngay dù không gọi được tên.
+    paddingRight: 2 + MATRIX_CELL_PAD,
   },
   totalCol: {
     // SIZED LIKE A DATA COLUMN, not to a fixed number. It was `width: 64`, and a

package/src/member_chip.tsx

@@ -29,6 +29,20 @@ interface MemberChipProps {
   /** A rung on the shared avatar scale. Default `md`, which is sized to seat in a
    *  40px control band; drop to `sm` for a dense cell. See `AVATAR_PX`. */
   size?: AvatarSize;
+  /**
+   * Drop the face and render the person as TEXT.
+   *
+   * Pass it wherever the member is ONE FIELD AMONG COLUMNS rather than the row's
+   * subject — an owner column, an assignee cell, a "last edited by". Two reasons,
+   * both from `composition.md` §Identity marks: a second mark competes with the
+   * mark the row already carries for its own subject, and a handful of people
+   * owning hundreds of rows draws the same disc over and over, which "carries
+   * nothing and is the largest, brightest thing there".
+   *
+   * Keep the face where the member IS the subject — a roster, a picker option, a
+   * profile, a directory row.
+   */
+  showAvatar?: boolean;
   /** This person is no longer active — they left, their account was closed.
    *  Mutes the name so a record that still names them reads as history rather
    *  than as a current assignment. The chip keeps its height, because its usual
@@ -58,6 +72,7 @@ export function MemberChip({
   image,
   secondary,
   size = "md",
+  showAvatar = true,
   inactive,
   style,
 }: MemberChipProps) {
@@ -101,7 +116,9 @@ export function MemberChip({
     secondary && AVATAR_PX[size] < AVATAR_PX.lg ? "lg" : size;
   return (
     <View style={[styles.row, style]}>
-      <Avatar size={markSize} name={displayName} source={image ? { uri: image } : undefined} />
+      {showAvatar ? (
+        <Avatar size={markSize} name={displayName} source={image ? { uri: image } : undefined} />
+      ) : null}
       <View style={styles.text}>
         <Text
           userSelect="none"

package/src/menu_button.tsx

@@ -91,7 +91,11 @@ export function MenuButton(props: MenuButtonProps) {
 
   const resolvedIcon =
     typeof icon === "string" ? (
-      <Icon size={20} name={icon as IconName} color={danger ? colors.red["900"] : undefined} />
+      <Icon
+        size={20}
+        name={icon as IconName}
+        color={disabled ? colors.zinc["400"] : danger ? colors.red["900"] : undefined}
+      />
     ) : (
       icon
     );
@@ -102,7 +106,7 @@ export function MenuButton(props: MenuButtonProps) {
         weight="medium"
         numberOfLines={1}
         userSelect="none"
-        color={danger ? "danger" : undefined}
+        color={disabled ? "muted" : danger ? "danger" : undefined}
       >
         {title}
       </Text>
@@ -125,6 +129,7 @@ export function MenuButton(props: MenuButtonProps) {
     styles.container,
     highlighted && styles.highlighted,
     focused && !highlighted && styles.focused,
+    disabled && styles.disabled,
     style,
   ];
 
@@ -182,6 +187,11 @@ const styles = StyleSheet.create({
   highlighted: {
     backgroundColor: colors.zinc["100"],
   },
+  // A blocked row keeps its geometry and loses its weight — the label and icon
+  // go muted above, and the row itself stops inviting the press.
+  disabled: {
+    opacity: 0.6,
+  },
   focused: {
     backgroundColor: colors.zinc["50"],
   },

package/src/option_list.tsx

@@ -11,6 +11,7 @@ import { ActivityIndicator } from "./activity_indicator";
 import { TextInputField } from "./text_input_field";
 import { useScreenSize } from "./use_screen_size";
 import { useOptionList, type UseOptionListParams } from "./use_option_list";
+import { pickerEmptyOptionLabel } from "./picker_empty_option";
 import { useLoticsLocale } from "./locale";
 import type { PickerOption } from "./picker";
 
@@ -61,7 +62,16 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
   const emptyText = props.emptyText ?? loc.noResults;
   const selectAllLabel = props.selectAllLabel ?? loc.selectAll;
   const deselectAllLabel = props.deselectAllLabel ?? loc.deselectAll;
-  const list = useOptionList(props);
+  // `Picker` names its clear row from the locale; this list is the same row on
+  // the popover path, so it takes the same name from the same helper.
+  const emptyWord = useLoticsLocale().picker.emptyOption;
+  const list = useOptionList({
+    ...props,
+    emptyOptionLabel: pickerEmptyOptionLabel({
+      includeEmptyOption: props.includeEmptyOption,
+      localeEmptyOption: emptyWord,
+    }),
+  });
   const { small } = useScreenSize();
 
   // The option rows set `activeIndex` on hover but have no hover-OUT, so entering

package/src/progress_bar.tsx

@@ -92,8 +92,15 @@ export function ProgressBar(props: ProgressBarProps) {
         <View style={[styles.track, styles.compactTrack]}>
           <View style={[styles.fill, { width: `${percentage}%`, backgroundColor: isComplete ? completeColor : color }]} />
         </View>
+        {/* The caption is MUTED at every ratio, matching the non-compact anatomy.
+            A meter can mean "done" (a task, an upload) or "used up" (a credit
+            limit, a quota), and the same 100% is good in one and bad in the
+            other — so the component cannot colour the number without asserting
+            something it does not know. It used to draw a green caption beside a
+            red bar on every cap meter. The verdict stays where the caller states
+            it: the FILL, via `completeColor`. */}
         {format === "none" ? null : (
-          <Text size="sm" tabular color={isComplete ? "success" : "muted"}>
+          <Text size="sm" tabular color="muted">
             {label}
           </Text>
         )}
@@ -151,6 +158,12 @@ const styles = StyleSheet.create({
   },
   compactTrack: {
     flex: 1,
+    // A shrink-to-fit parent — a stacked `Table` cell, a `DetailRow` with no
+    // `DetailTable` above it — gives `flex: 1` nothing to divide, so the track
+    // measures 0 and the meter renders as its caption alone. It passes every
+    // treatment probe because there is nothing left to measure. The floor is
+    // what makes it a bar rather than a number.
+    minWidth: 64,
   },
   header: {
     flexDirection: "row",

package/src/record_summary.tsx

@@ -102,6 +102,11 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "flex-start",
     gap: 16,
+    // The metric sizes to its content while `identity` is `flex: 1`, so without
+    // this the title is the only thing that can give — and it gave down to three
+    // wrapped lines in a 358px column while the metric's note kept its full width.
+    // A record's identity is the last thing on the surface that should yield.
+    flexWrap: "wrap",
   },
   identity: {
     flex: 1,

package/src/stacked_bar_chart.tsx

@@ -129,7 +129,10 @@ export function StackedBarChart(props: StackedBarChartProps) {
                   <View style={styles.leading}>{row.leading}</View>
                 ) : null}
                 <View style={styles.headText}>
-                  <Text size="sm" weight="medium" numberOfLines={2} leading="tight">
+                  {/* regular, matching `Breakdown`'s label: the two components draw
+                      the same row and a card may sit them side by side. The figure
+                      carries the weight; the series name does not. */}
+                  <Text size="sm" numberOfLines={2} leading="tight">
                     {row.label}
                   </Text>
                   {row.meta ? (

package/src/table_fit.ts

@@ -26,6 +26,23 @@ export interface TableFitColumn {
   key: string;
   /** Fixed width in px; omit for a flexible column. */
   width?: number;
+  /**
+   * Fixed CHROME inside this flexible cell, in px — a leading mark, a badge, a
+   * swatch, plus its gap. Added to the read floor so the cell keeps
+   * {@link FLEX_READ_WIDTH} for the TEXT rather than spending part of it on
+   * furniture.
+   *
+   * `composition.md` requires every register row to carry a leading mark and
+   * `tpl_item_list` puts it INSIDE the subject cell (the `leading` slot holds
+   * the checkbox), so obeying the kit's own rule silently adds ~50px the fit
+   * could not see: a register reports "fitted" while its subject clips. Measured
+   * in the wild — a subject handed 154px for strings needing 283, with every
+   * other signal green.
+   *
+   * Ignored on a fixed-`width` column, which already states its total. Default
+   * 0, so a caller that passes nothing gets exactly the previous behaviour.
+   */
+  lead?: number;
   /** This column's claim on space, **`1` = highest**, the way P1/P2/P3 rank a
    *  bug: the column you least want to lose gets the SMALLEST number. Said the
    *  other way round it is the same rule — the larger the number, the sooner the
@@ -133,7 +150,7 @@ export function computeTableFit(
   const requiredWidth = (cols: TableFitColumn[]): number => {
     const slots = cols.length + (leading > 0 ? 1 : 0) + (trailing > 0 ? 1 : 0);
     const gaps = Math.max(0, slots - 1) * COLUMN_GAP;
-    const colsWidth = cols.reduce((sum, c) => sum + (c.width ?? FLEX_READ_WIDTH), 0);
+    const colsWidth = cols.reduce((sum, c) => sum + (c.width ?? FLEX_READ_WIDTH + (c.lead ?? 0)), 0);
     return ROW_H_PADDING + (leading > 0 ? leading : 0) + (trailing > 0 ? trailing : 0) + colsWidth + gaps;
   };
 

package/src/thumbnail_stack.tsx

@@ -62,6 +62,19 @@ export interface ThumbnailStackProps {
   items: readonly ThumbnailStackItem[];
   /** Pictures shown before the remainder becomes `+N`. Default 3. */
   max?: number;
+  /**
+   * Silence the marks for assistive tech — they become decoration.
+   *
+   * The DEFAULT is to announce each `label`, and that is deliberate: a stack is
+   * often the only statement of what is there, and a run of unlabelled pictures
+   * is unreadable. Pass this where the row ALREADY names the thing in text, so
+   * the pictures do not read it a second time on every row.
+   *
+   * Note the default is the opposite of `Avatar.announce`, and for the same
+   * reason: an avatar almost always sits beside its name, a stack often does
+   * not. The default follows where the component actually sits.
+   */
+  decorative?: boolean;
   /**
    * A rung on the shared avatar scale — the same scale the marks in the
    * neighbouring columns take, so a row of goods and a row of people sit on one
@@ -73,7 +86,7 @@ export interface ThumbnailStackProps {
 }
 
 export function ThumbnailStack(props: ThumbnailStackProps) {
-  const { items, max = DEFAULT_MAX, size = "md", style, testID } = props;
+  const { items, max = DEFAULT_MAX, size = "md", decorative, style, testID } = props;
   const locale = useLoticsLocale();
 
   if (items.length === 0) return null;
@@ -92,8 +105,10 @@ export function ThumbnailStack(props: ThumbnailStackProps) {
       {shown.map((item, index) => (
         <View
           key={item.id}
-          accessible
-          accessibilityLabel={item.label}
+          // Announced by default — a standalone stack is unreadable otherwise.
+          // `decorative` silences it where the row already names the thing.
+          accessible={decorative ? undefined : true}
+          accessibilityLabel={decorative ? undefined : item.label}
           style={{
             width: px,
             height: px,

package/src/use_option_list.ts

@@ -65,6 +65,10 @@ export interface UseOptionListParams<
   onCustomCommit?: (rawQuery: string) => void;
   /** Single-select: a leading "" row that clears the value. */
   includeEmptyOption?: boolean;
+  /** What the clear row is CALLED. `OptionList` supplies the locale's word via
+   *  `pickerEmptyOptionLabel`; the default keeps older callers rendering as
+   *  before rather than silently gaining a word they never asked for. */
+  emptyOptionLabel?: string;
   enableSelectAll?: boolean;
 }
 
@@ -130,6 +134,7 @@ export function useOptionList<T extends string, MULTI extends boolean = false, D
     customOptionPlacement = "bottom",
     onCustomCommit,
     includeEmptyOption = false,
+    emptyOptionLabel = "",
     enableSelectAll = false,
   } = params;
 
@@ -211,7 +216,13 @@ export function useOptionList<T extends string, MULTI extends boolean = false, D
         kind !== "custom" && (multi ? selectedSet.has(option.value) : option.value === singleValue);
       out.push({ kind, option, index: out.length, selected, nativeID: optionId(out.length) });
     };
-    if (includeEmptyOption && !multi && !searching) push("empty", { value: "" as T, label: "" });
+    // The clear row is a CHOICE the reader picks, so it is NAMED — `Picker` has
+    // always named it through `pickerEmptyOptionLabel`, and this list did not,
+    // so every `Select`/`InlineSelect` offering a way back to empty offered it
+    // as a blank row with an empty accessible name.
+    if (includeEmptyOption && !multi && !searching) {
+      push("empty", { value: "" as T, label: emptyOptionLabel });
+    }
     if (customRow && customOptionPlacement === "top") push("custom", customRow);
     for (const o of filtered) push("option", o);
     if (customRow && customOptionPlacement === "bottom") push("custom", customRow);
@@ -221,6 +232,7 @@ export function useOptionList<T extends string, MULTI extends boolean = false, D
     customRow,
     customOptionPlacement,
     includeEmptyOption,
+    emptyOptionLabel,
     multi,
     searching,
     selectedSet,