@lotics/ui 11.7.1 → 11.7.3

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/package.json

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

package/src/combobox.tsx

@@ -511,7 +511,6 @@ export function ComboboxContent(props: ComboboxContentProps) {
                 const label = opt.label ?? opt.value;
                 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,
@@ -526,9 +525,10 @@ export function ComboboxContent(props: ComboboxContentProps) {
                 // 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} />
+                  <MenuListItem key={`${row.kind}-${opt.value}`} {...shared} title={content ?? label} description={content ? undefined : desc} />
                 ) : (
                   <MenuButton
+                    key={`${row.kind}-${opt.value}`}
                     {...shared}
                     title={
                       <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>

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/option_list.tsx

@@ -122,7 +122,6 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
             const label = opt.label ?? opt.value;
             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,
@@ -146,9 +145,10 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
             // 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} />
+              <MenuListItem key={`${row.kind}-${opt.value}`} {...shared} title={content ?? label} description={content ? undefined : desc} />
             ) : (
               <MenuButton
+                key={`${row.kind}-${opt.value}`}
                 {...shared}
                 title={
                   <Text userSelect="none" numberOfLines={1} weight={isCustom ? "medium" : undefined}>