@lotics/ui 46.14.1 → 47.0.0

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/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/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,