@lotics/ui 7.14.0 → 7.15.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.15.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} />;