@lotics/ui 44.12.0 → 44.13.0

package/docs/catalog.md

@@ -959,6 +959,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   It opens SCROLLED to its seat (the selected row in `search.mode:"none"`, else the first real
   option), which only shows on a list longer than its own box and is the difference between a
   96-row list opening on your value and opening at the top.
+  `indeterminateValues` (multi) draws a MIXED tick on values only SOME of the things being
+  edited carry — the shape for labelling a selection, where an empty box would say "none of
+  these" and be wrong. Presentational and one-directional: a mixed row is not in `value`, so
+  pressing it selects (the caller applies to all), and it announces itself in the row label
+  because `role="option"` has no ARIA state for a third value.
 - **`combobox`** — COMPOUND single-select editable search: `Combobox` root +
   `ComboboxInput` + `ComboboxContent`, optional `ComboboxEmpty`/`ComboboxFooter`,
   `useCombobox()`; over the shared option-list engine; browses on focus; no `multi` —
@@ -1485,7 +1490,11 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
 - **`table` › `TableGroup`** — a titled BAND of rows inside a `Table` (`label`, `count?`, `color?` for a single valence dot). Turns a register that presents records into one that triages them: group by what implies a different ACTION, order the bands by what needs the reader now, and let air rather than a rule separate them. → [composition.md](./composition.md) §"A register that TRIAGES".
 - **`sort_header`** — `SortHeader` + `SortState`/`SortDir` + `cycleSort` + `sortBy` +
   `SortHeaderLabels`: the sortable column header and the sort-state helpers `Table`/
-  `DataGrid` consumers drive.
+  `DataGrid` consumers drive. `sortBy` copies rather than mutates, and compares strings with
+  `localeCompare` (case- and accent-folded, `numeric`) rather than `<`/`>` — code-point order
+  exiles every accented letter past the whole unaccented alphabet, so a Vietnamese register
+  reads correctly until its first Đ and looks fine to a reviewer forever. `getValue` returns a
+  NUMBER for anything ordered numerically (a timestamp, a count).
 - **`data_grid`** — `DataGrid` + `gridRowStyle`: the inline-managed grouped table (see
   [Tabular data](#tabular-data--pick-by-scale--intent)); `labels` localizes the sort-header
   a11y via `SortHeaderLabels`.
@@ -1501,7 +1510,9 @@ source (`src/<module>.tsx`/`.ts`) is the API reference.
   on the pill is the clear, and the editor inside brings whatever actions it has, so a
   multi-select's "select all / deselect all" is the only rule in the panel. `footer` is for an
   editor that must COMMIT (Cancel / Save); reach for it only then, since it adds a second band
-  under an editor that already has one.
+  under an editor that already has one. `testID` names the pill: a register's bulk verbs and
+  its facets routinely share a word ("Tags" is a filter AND a selection action), so a driver
+  reaching by visible name gets whichever one it finds.
 - **`summary_line`** — `SummaryLine`: the light inline summary of a register/list's FILTERED
   view, sits below the toolbar; NOT the boxed dashboard `kpi_strip` band. Every item is an
   AGGREGATE over the rows in view (a count, a sum, a fill), and the strip goes with the set it

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lotics/ui",
-  "version": "44.12.0",
+  "version": "44.13.0",
   "type": "module",
   "exports": {
     "./vite": {

package/src/filter_chip.tsx

@@ -42,6 +42,10 @@ export interface FilterChipProps {
    *  editor that already carries bottom actions of its own gets a second
    *  bordered band from this. */
   footer?: ReactNode;
+  /** Names the TRIGGER, so a driver reaches this facet rather than whichever
+   *  other control on the band happens to share its word — a register's bulk
+   *  verbs and its filters routinely do ("Tags" is both). */
+  testID?: string;
 }
 
 /**
@@ -76,7 +80,7 @@ export function selectSummary(
  * toolbar's `ColumnFilter` is this pill plus its query-condition mapping.
  */
 export function FilterChip(props: FilterChipProps) {
-  const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer } = props;
+  const { label, summary, onClear, children, side = "bottom", align = "start", open, onOpenChange, footer, testID } = props;
   const clearLabel = props.clearLabel ?? useLoticsLocale().filterChip.clear;
   const active = summary != null && (typeof summary !== "string" || summary.length > 0);
   // THE × IS THE CLEAR, and it is the only one. A valued, non-clearable pill
@@ -110,7 +114,7 @@ export function FilterChip(props: FilterChipProps) {
   return (
     <Popover side={side} align={align} open={isOpen} onOpenChange={setOpen}>
       <PopoverTrigger>
-        <Chip onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
+        <Chip testID={testID} onDismiss={showClear ? onClear : undefined} dismissTooltip={clearLabel}>
           {active && typeof summary !== "string" ? (
             <View style={styles.summaryRow}>
               {/* This branch only renders when ACTIVE, so it takes the accent

package/src/locale.tsx

@@ -47,7 +47,7 @@ export interface LoticsLocale {
   /** `OptionList` (and everything built on it — `Select`, `Combobox`, the
    *  in-cell editors): the select-all/deselect-all links, the empty state, the
    *  internal search-field placeholder, and the `Combobox` recents header. */
-  optionList: { selectAll: string; deselectAll: string; clear: string; noResults: string; recent: string; searchPlaceholder: string };
+  optionList: { selectAll: string; deselectAll: string; clear: string; noResults: string; recent: string; searchPlaceholder: string; someSelected: string };
   /** `Picker`'s empty option, when the caller declares empty a CHOICE
    *  (`includeEmptyOption`). A value, not an action — hence "None" rather than
    *  the option list's "Clear": in a native `<select>` the reader picks it the
@@ -298,7 +298,7 @@ export const en: LoticsLocale = {
     descending: ", descending",
   },
   referenceField: { open: "Open", change: "Change", clear: "Clear", edit: "Edit", save: "Save", saving: "Saving…", cancel: "Cancel" },
-  optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…" },
+  optionList: { selectAll: "Select all", deselectAll: "Deselect all", clear: "Clear", noResults: "No results", recent: "Recent", searchPlaceholder: "Search…", someSelected: "some selected" },
   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" },
@@ -485,7 +485,7 @@ export const vi: LoticsLocale = {
     descending: " (giảm dần)",
   },
   referenceField: { open: "Mở", change: "Đổi", clear: "Bỏ chọn", edit: "Sửa", save: "Lưu", saving: "Đang lưu…", cancel: "Huỷ" },
-  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…" },
+  optionList: { selectAll: "Chọn tất cả", deselectAll: "Bỏ chọn tất cả", clear: "Xóa", noResults: "Không có kết quả", recent: "Gần đây", searchPlaceholder: "Tìm…", someSelected: "một số đã chọn" },
   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" },

package/src/option_list.tsx

@@ -23,6 +23,17 @@ export interface OptionListProps<T extends string = string, MULTI extends boolea
   getOptionDescription?: (option: PickerOption<T, D>) => string | undefined;
   loading?: boolean;
   emptyText?: string;
+  /**
+   * Multi only: values that SOME of the things being edited carry, drawn as a
+   * mixed tick rather than an empty one.
+   *
+   * What it is for is editing a SET at once — five documents, three of which
+   * carry a label. An empty box there says "none of them", which is false, and
+   * the reader who ticks it to fix that cannot tell afterwards what they
+   * changed. Purely presentational: a mixed row is not in `value`, so pressing
+   * it selects (adds to all) and the caller decides what that means.
+   */
+  indeterminateValues?: readonly T[];
   accessibilityLabel?: string;
   selectAllLabel?: string;
   deselectAllLabel?: string;
@@ -45,7 +56,7 @@ export interface OptionListProps<T extends string = string, MULTI extends boolea
 export function OptionList<T extends string, MULTI extends boolean = false, D = unknown>(
   props: OptionListProps<T, MULTI, D>,
 ) {
-  const { testID, renderOptionContent, getOptionDescription, loading = false, accessibilityLabel, search, onClear } = props;
+  const { testID, renderOptionContent, getOptionDescription, loading = false, accessibilityLabel, search, onClear, indeterminateValues } = props;
   const loc = useLoticsLocale().optionList;
   const emptyText = props.emptyText ?? loc.noResults;
   const selectAllLabel = props.selectAllLabel ?? loc.selectAll;
@@ -122,6 +133,11 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
           list.rows.map((row) => {
             const isCustom = row.kind === "custom";
             const opt = row.option;
+            // A mixed row is PAINTED mixed, and `role="option"` has no ARIA state
+            // for it — `aria-checked="mixed"` belongs to checkbox roles, and this
+            // row carries `aria-selected`. So the third state is said in the
+            // label, or it exists for sighted readers only.
+            const mixed = props.multi && !row.selected && indeterminateValues?.includes(opt.value) === true;
             const desc = row.kind === "option" ? getOptionDescription?.(opt) : undefined;
             const label = opt.label ?? opt.value;
             const content = row.kind === "option" ? renderOptionContent?.(opt) : undefined;
@@ -129,11 +145,17 @@ export function OptionList<T extends string, MULTI extends boolean = false, D =
               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)),
+              accessibilityLabel: isCustom
+                ? label
+                : mixed
+                  ? `${opt.label ?? String(opt.value)}, ${loc.someSelected}`
+                  : (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} />
+                // A row already in `value` is fully selected — "some carry it"
+                // cannot also be "all carry it", so selection wins.
+                <Checkbox checked={row.selected} indeterminate={mixed} />
               ) : undefined,
               right:
                 !props.multi && row.selected ? (

package/src/sort_header.tsx

@@ -23,8 +23,13 @@ export function cycleSort(current: SortState | null, key: string): SortState | n
 
 /**
  * Order a COPY of `items` by the active column. `getValue` maps (item, key) to a
- * comparable (lowercase strings for case-insensitive order). Returns `items`
- * unchanged when nothing is sorted.
+ * comparable. Returns `items` unchanged when nothing is sorted.
+ *
+ * Strings are compared with `localeCompare`, NOT `<`/`>`. Those operators order
+ * by code point, which puts every accented letter after the whole unaccented
+ * alphabet — so a Vietnamese register sorted by name reads correctly until the
+ * first Đ, and then does not. Numbers keep numeric order; a mixed pair falls
+ * back to the operators, which is the only defined thing left to do.
  */
 export function sortBy<T>(
   items: T[],
@@ -36,6 +41,13 @@ export function sortBy<T>(
   return [...items].sort((a, b) => {
     const va = getValue(a, sort.key);
     const vb = getValue(b, sort.key);
+    if (typeof va === "string" && typeof vb === "string") {
+      // Undefined locale = the reader's own, which is the right collation for a
+      // register they are reading. `sensitivity: "base"` folds case and accent
+      // for ORDERING only, so "Đơn" and "don" land beside each other instead of
+      // in different halves of the list.
+      return va.localeCompare(vb, undefined, { sensitivity: "base", numeric: true }) * dir;
+    }
     return va < vb ? -dir : va > vb ? dir : 0;
   });
 }