@lotics/ui 7.14.0 → 7.16.0

package/AGENTS.md

@@ -50,7 +50,9 @@ Pick by capability, not by name. (→ the source file for the API.)
   `useOptionList` engine; `Picker` is the only one that's a native dropdown.
 - **Pick member(s)** — `MemberSelect` (a `Select` that renders each option as a `MemberChip`,
   single or multi) — the ready member picker; pass it the roster (`members={useMembers().members}`).
-  Don't re-wire `Select` + `renderOptionContent` + a directory by hand. To edit a `select_member`
+  Don't re-wire `Select` + `renderOptionContent` + a directory by hand. For an assignee FILTER that
+  also matches unassigned records, pass `unassignedLabel` → it prepends a muted "unassigned" option
+  (value `MEMBER_UNASSIGNED`), so you never hand-roll a mixed member+none `Select`. To edit a `select_member`
   field IN PLACE (chip at rest → picker on click) use its inline-edit twin `InlineMemberSelect`.
 - **A person / member (display)** — `MemberChip` (avatar + name + optional secondary line) — the
   ONE way to show a member inline: a picker option, an assignee, a `select_member` value. Pure:

package/package.json

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

package/src/member_select.tsx

@@ -8,6 +8,12 @@ import {
   type PickerOnClose,
 } from "./picker";
 import { MemberChip } from "./member_chip";
+import { Text } from "./text";
+
+/** The `value` of {@link MemberSelect}'s "unassigned" option (present only when
+ *  `unassignedLabel` is set). Check a `MemberSelect` value against it to detect
+ *  "no member assigned" — e.g. `value.includes(MEMBER_UNASSIGNED)` in a filter. */
+export const MEMBER_UNASSIGNED = "__unassigned__";
 
 /** A candidate member for {@link MemberSelect}. Shaped to accept a `useMembers`
  *  row from `@lotics/app-sdk` (or any roster) directly. */
@@ -35,6 +41,13 @@ interface MemberSelectProps<MULTI extends boolean = false> {
   /** Show an in-menu search box to filter the roster; default false. */
   searchable?: boolean;
   includeEmptyOption?: boolean;
+  /**
+   * When set, prepend a selectable "unassigned" option (value {@link MEMBER_UNASSIGNED}),
+   * rendered as muted text — for an assignee FILTER that also matches "no one assigned".
+   * Distinct from `includeEmptyOption` (a single-select CLEAR row that unsets the value):
+   * this is a real, filterable value the consumer detects in `value`.
+   */
+  unassignedLabel?: string;
   enableSelectAll?: boolean;
   /** Label for the "select all" link in multi-select mode. Pass a translated string. */
   selectAllLabel?: string;
@@ -61,16 +74,20 @@ interface MemberSelectProps<MULTI extends boolean = false> {
  * ```
  */
 export function MemberSelect<MULTI extends boolean = false>(props: MemberSelectProps<MULTI>) {
-  const { members, ...picker } = props;
+  const { members, unassignedLabel, ...picker } = props;
 
   const byId = useMemo(() => new Map(members.map((m) => [m.id, m])), [members]);
   const options = useMemo<PickerOption<string>[]>(
-    () => members.map((m) => ({ value: m.id, label: m.name || m.email || m.id })),
-    [members],
+    () => [
+      ...(unassignedLabel ? [{ value: MEMBER_UNASSIGNED, label: unassignedLabel }] : []),
+      ...members.map((m) => ({ value: m.id, label: m.name || m.email || m.id })),
+    ],
+    [members, unassignedLabel],
   );
 
   const renderOptionContent = useCallback(
     (option: PickerOption<string>) => {
+      if (option.value === MEMBER_UNASSIGNED) return <Text size="sm" color="muted">{option.label}</Text>;
       const member = byId.get(option.value);
       if (!member) return null;
       return <MemberChip name={member.name || member.email} image={member.image} />;

package/src/table.tsx

@@ -80,30 +80,35 @@ export function Table(props: TableProps) {
 
   return (
     <TableContext.Provider value={{ columns, leading, trailing }}>
-      <View style={styles.headerBand}>
-        {leading > 0 ? <View style={{ width: leading }}>{selectAll}</View> : null}
-        {columns.map((col) => (
-          <View key={col.key} style={colStyle(col)}>
-            {col.label ? (
-              col.sortable && onSort ? (
-                <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
-              ) : (
-                <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
-                  {col.label}
-                </Text>
-              )
-            ) : null}
-          </View>
-        ))}
-        {trailing > 0 ? <View style={{ width: trailing }} /> : null}
-      </View>
-      <View style={styles.body}>
-        {rows.map((row, i) => (
-          <View key={i}>
-            {i > 0 ? <Divider /> : null}
-            {row}
-          </View>
-        ))}
+      {/* ONE layout node: without this wrapper the header band + body land as two
+          direct flex children of the app's container, and a parent column `gap`
+          (the standard section spacing) opens a hole between the header and rows. */}
+      <View>
+        <View style={styles.headerBand}>
+          {leading > 0 ? <View style={{ width: leading }}>{selectAll}</View> : null}
+          {columns.map((col) => (
+            <View key={col.key} style={colStyle(col)}>
+              {col.label ? (
+                col.sortable && onSort ? (
+                  <SortHeader label={col.label} sortKey={col.key} sort={sort ?? null} onSort={onSort} align={col.align} labels={sortLabels} />
+                ) : (
+                  <Text size="xs" color="muted" transform="uppercase" numberOfLines={1}>
+                    {col.label}
+                  </Text>
+                )
+              ) : null}
+            </View>
+          ))}
+          {trailing > 0 ? <View style={{ width: trailing }} /> : null}
+        </View>
+        <View style={styles.body}>
+          {rows.map((row, i) => (
+            <View key={i}>
+              {i > 0 ? <Divider /> : null}
+              {row}
+            </View>
+          ))}
+        </View>
       </View>
     </TableContext.Provider>
   );