@oxy.so/bloom 2.9.0 → 2.11.0

package/lib/module/chat-list/ChatListItem.js

@@ -0,0 +1,352 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { MessageStatus, TypingDots, UnreadBadge } from "../chat-indicators/index.js";
+import { RiNotificationOffFill } from "../icons/remix/RiNotificationOffFill.js";
+import { RiPushpinFill } from "../icons/remix/RiPushpinFill.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { TYPE_SCALE } from "../typography/scale.js";
+import { ChatAvatar, ChatGlyphButton, RowLink, actionGlyphColor } from "./parts.js";
+import { ChatSwipeRow } from "./ChatSwipeRow.js";
+import { CHAT_ATTACHMENT_ICONS, CHAT_LIST_CSS, CHAT_LIST_STYLE_ID, CHAT_ROW_GEOMETRY, CHAT_ROW_RADIUS, DEFAULT_ITEM_LABELS, IS_WEB, chatMarker, composeChatRowName, hasUnread, resolveChatListPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One conversation in the list.
+ *
+ *   comfortable  72 tall · 16 padding · 48 avatar · 12 · name over preview ·
+ *                right column: time, then the states
+ *   compact      56 tall · 12 padding · 36 avatar · 10 · the same two lines one
+ *                step down the ramp — the 360px desktop pane and search results
+ *
+ * The NAME turns semibold while anything is unread. The PREVIEW is one line and
+ * takes whichever shape applies, in this order: a `draft` (italic "Draft:" in
+ * the negative colour), an `attachment` (its glyph and the app's own words —
+ * "Photo", "Voice message 0:12"), then the text, optionally led by a muted
+ * `"You: "` / sender prefix. A `typingLabel` replaces the whole line with
+ * bouncing dots.
+ *
+ * The RIGHT COLUMN is the time over the states: the mute bell, the pin, and then
+ * EITHER an unread badge OR the delivery ticks of your own last message. Those
+ * two are mutually exclusive by construction — if their message is the last one,
+ * yours has no place in this row — and the badge wins.
+ *
+ * ACTIONS come from `swipeActions`. On touch a drag uncovers them; on web they
+ * appear as icon buttons on hover and keyboard focus, over the right column,
+ * because there is no drag gesture to discover there. The buttons are siblings
+ * of the row's link, never children of it: a button inside an anchor is invalid
+ * HTML and every "Archive" click would open the conversation.
+ *
+ * ACCESSIBILITY: the row is ONE target with ONE name, and the content is hidden
+ * from assistive tech. A pin, a bell, a badge and a pair of ticks are four
+ * states no text on the row carries, so the composed name says all of them —
+ * "Ana Ferrer, Verified, Draft: see you at eight, 12:41, 3 unread messages,
+ * Muted, Pinned". The open conversation is `aria-current` on web and
+ * `accessibilityState.selected` on native.
+ */
+
+function ChatListItemComponent({
+  name,
+  avatar,
+  faces,
+  avatarShape = 'circle',
+  status,
+  kind = 'direct',
+  verified,
+  marker,
+  preview,
+  typingLabel,
+  time,
+  unreadCount,
+  unreadDot,
+  muted = false,
+  pinned = false,
+  outgoingStatus,
+  density = 'comfortable',
+  selected = false,
+  onPress,
+  onLongPress,
+  href,
+  swipeActions,
+  onAction,
+  swipeEnabled = !IS_WEB,
+  accessibilityLabel,
+  labels,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const [pressed, setPressed] = useState(false);
+  const text = useMemo(() => ({
+    ...DEFAULT_ITEM_LABELS,
+    ...labels
+  }), [labels]);
+  const geo = CHAT_ROW_GEOMETRY[density];
+  const unread = hasUnread(unreadCount, unreadDot);
+  const badge = chatMarker(kind, verified, text);
+  const rowName = accessibilityLabel ?? composeChatRowName({
+    name,
+    markerLabel: badge?.label ?? null,
+    typingLabel,
+    preview,
+    time,
+    unreadCount,
+    unreadDot,
+    muted,
+    pinned,
+    outgoingStatus
+  }, text, count => count === 1 ? '1 unread message' : `${count} unread messages`);
+
+  // --- the preview line ----------------------------------------------------
+  const previewColor = paint.textMuted;
+  const previewType = TYPE_SCALE[geo.previewVariant];
+  const prefixStyle = {
+    color: previewColor
+  };
+  const draftStyle = {
+    color: paint.negative,
+    fontStyle: 'italic'
+  };
+  let previewLine = null;
+  if (typingLabel !== undefined) {
+    previewLine = /*#__PURE__*/_jsx(TypingDots, {
+      label: typingLabel,
+      color: paint.accent,
+      size: density === 'compact' ? 5 : 6,
+      labelStyle: {
+        ...previewType,
+        color: paint.accent
+      },
+      testID: testID ? `${testID}-typing` : undefined
+    });
+  } else if (preview !== undefined) {
+    // The glyph is drawn OUTSIDE the text so it never wraps away from its label
+    // when the line truncates. A draft hides it: the draft prefix is the point
+    // of the line, and two lead-ins compete.
+    const AttachmentIcon = preview.attachment && !preview.draft ? CHAT_ATTACHMENT_ICONS[preview.attachment.kind] : null;
+    const body = [preview.attachment?.label, preview.text].filter(Boolean).join(' ');
+    previewLine = /*#__PURE__*/_jsxs(View, {
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 4,
+        minWidth: 0
+      },
+      children: [AttachmentIcon ? /*#__PURE__*/_jsx(View, {
+        testID: testID ? `${testID}-attachment` : undefined,
+        children: /*#__PURE__*/_jsx(AttachmentIcon, {
+          width: geo.glyph,
+          height: geo.glyph,
+          fill: previewColor
+        })
+      }) : null, /*#__PURE__*/_jsxs(Text, {
+        variant: geo.previewVariant,
+        numberOfLines: 1,
+        style: {
+          color: previewColor,
+          flexShrink: 1,
+          minWidth: 0
+        },
+        testID: testID ? `${testID}-preview` : undefined,
+        children: [preview.draft ? /*#__PURE__*/_jsx(Text, {
+          style: draftStyle,
+          children: `${text.draft} `
+        }) : null, !preview.draft && preview.sender ? /*#__PURE__*/_jsx(Text, {
+          style: prefixStyle,
+          children: `${preview.sender}: `
+        }) : null, body]
+      })]
+    });
+  }
+
+  // --- the right column ----------------------------------------------------
+  const timeColor = unread && !muted ? paint.accent : paint.textMuted;
+  const states = /*#__PURE__*/_jsxs(View, {
+    style: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 4
+    },
+    children: [muted ? /*#__PURE__*/_jsx(RiNotificationOffFill, {
+      width: geo.glyph,
+      height: geo.glyph,
+      fill: paint.textMuted,
+      testID: testID ? `${testID}-muted` : undefined
+    }) : null, pinned ? /*#__PURE__*/_jsx(RiPushpinFill, {
+      width: geo.glyph,
+      height: geo.glyph,
+      fill: paint.textMuted,
+      testID: testID ? `${testID}-pinned` : undefined
+    }) : null, unread ? /*#__PURE__*/_jsx(UnreadBadge, {
+      count: unreadCount,
+      dot: unreadDot,
+      muted: muted,
+      size: density === 'compact' ? 'small' : 'medium',
+      testID: testID ? `${testID}-unread` : undefined
+    }) : outgoingStatus ? /*#__PURE__*/_jsx(MessageStatus, {
+      status: outgoingStatus,
+      size: density === 'compact' ? 12 : 14,
+      testID: testID ? `${testID}-status` : undefined
+    }) : null]
+  });
+
+  // --- hover actions (web) -------------------------------------------------
+  const hoverActions = IS_WEB ? [...(swipeActions?.left ?? []), ...(swipeActions?.right ?? [])] : [];
+  const rowStyle = {
+    position: 'relative',
+    height: geo.height,
+    borderRadius: CHAT_ROW_RADIUS,
+    justifyContent: 'center',
+    '--bloom-chat-hover': paint.hover,
+    '--bloom-chat-selected': paint.selected,
+    // On web the fill is the adopted sheet's job: an inline `background-color`
+    // would outrank the `:hover` rule and the row would never light up.
+    ...(IS_WEB ? {
+      transitionProperty: 'background-color',
+      transitionDuration: '120ms'
+    } : {
+      backgroundColor: selected ? paint.selected : pressed ? paint.hover : 'transparent'
+    })
+  };
+  const row = /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomChatRow: '',
+      selected: String(selected)
+    }),
+    style: [rowStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(RowLink, {
+      name: rowName,
+      onPress: onPress,
+      onLongPress: onLongPress,
+      href: href,
+      selected: selected,
+      paint: paint,
+      onPressedChange: setPressed,
+      testID: testID ? `${testID}-link` : undefined
+    }), /*#__PURE__*/_jsxs(View, {
+      pointerEvents: "none",
+      "aria-hidden": true,
+      importantForAccessibility: "no-hide-descendants",
+      style: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: geo.height,
+        paddingLeft: geo.paddingHorizontal,
+        paddingRight: geo.paddingHorizontal
+      },
+      children: [/*#__PURE__*/_jsx(ChatAvatar, {
+        name: name,
+        avatar: avatar,
+        faces: faces,
+        shape: avatarShape,
+        status: status,
+        size: geo.avatar,
+        paint: paint,
+        testID: testID ? `${testID}-avatar` : undefined
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          marginLeft: geo.gap,
+          gap: geo.lineGap
+        },
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            minWidth: 0
+          },
+          children: [/*#__PURE__*/_jsx(Text, {
+            variant: unread ? geo.nameUnreadVariant : geo.nameVariant,
+            numberOfLines: 1,
+            style: {
+              color: paint.text,
+              flexShrink: 1,
+              minWidth: 0
+            },
+            testID: testID ? `${testID}-name` : undefined,
+            children: name
+          }), marker ?? (badge ? /*#__PURE__*/_jsx(badge.icon, {
+            width: geo.glyph,
+            height: geo.glyph,
+            fill: badge.accent ? paint.accent : paint.textMuted,
+            testID: testID ? `${testID}-marker` : undefined
+          }) : null)]
+        }), previewLine]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: {
+          alignItems: 'flex-end',
+          gap: geo.lineGap + 1,
+          marginLeft: geo.gap
+        },
+        children: [time !== undefined ? /*#__PURE__*/_jsx(Text, {
+          variant: geo.timeVariant,
+          numberOfLines: 1,
+          style: {
+            color: timeColor
+          },
+          testID: testID ? `${testID}-time` : undefined,
+          children: time
+        }) : null, states]
+      })]
+    }), hoverActions.length > 0 ? /*#__PURE__*/_jsx(View, {
+      ...webDataSet({
+        bloomChatActions: ''
+      }),
+      style: {
+        position: 'absolute',
+        right: geo.paddingHorizontal - 4,
+        top: 0,
+        bottom: 0,
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 2,
+        paddingLeft: 12,
+        borderTopRightRadius: CHAT_ROW_RADIUS,
+        borderBottomRightRadius: CHAT_ROW_RADIUS,
+        // Matches whatever fill the row shows WHILE the buttons are visible
+        // (they only appear on hover/focus, and a selected row keeps its own
+        // fill when hovered), so they read as part of the row, not a chip.
+        backgroundColor: selected ? paint.selected : paint.hover
+      },
+      testID: testID ? `${testID}-actions` : undefined,
+      children: hoverActions.map(action => /*#__PURE__*/_jsx(ChatGlyphButton, {
+        label: action.label,
+        icon: action.icon,
+        color: actionGlyphColor(action, paint),
+        hoverFill: paint.selected,
+        ring: paint.ring,
+        size: density === 'compact' ? 28 : 32,
+        glyph: density === 'compact' ? 16 : 18,
+        onPress: () => {
+          action.onPress?.();
+          onAction?.(action.key);
+        },
+        testID: testID ? `${testID}-action-${action.key}` : undefined
+      }, action.key))
+    }) : null]
+  });
+  if (swipeActions && swipeEnabled && (swipeActions.left?.length || swipeActions.right?.length)) {
+    return /*#__PURE__*/_jsx(ChatSwipeRow, {
+      actions: swipeActions,
+      onAction: onAction,
+      height: geo.height,
+      paint: paint,
+      testID: testID ? `${testID}-swipe` : undefined,
+      children: row
+    });
+  }
+  return row;
+}
+export const ChatListItem = /*#__PURE__*/memo(ChatListItemComponent);
+ChatListItem.displayName = 'ChatListItem';
+//# sourceMappingURL=ChatListItem.js.map

package/lib/module/chat-list/ChatListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useState","View","webDataSet","MessageStatus","TypingDots","UnreadBadge","RiNotificationOffFill","RiPushpinFill","adoptStyleSheet","useTheme","Text","TYPE_SCALE","ChatAvatar","ChatGlyphButton","RowLink","actionGlyphColor","ChatSwipeRow","CHAT_ATTACHMENT_ICONS","CHAT_LIST_CSS","CHAT_LIST_STYLE_ID","CHAT_ROW_GEOMETRY","CHAT_ROW_RADIUS","DEFAULT_ITEM_LABELS","IS_WEB","chatMarker","composeChatRowName","hasUnread","resolveChatListPaint","jsx","_jsx","jsxs","_jsxs","ChatListItemComponent","name","avatar","faces","avatarShape","status","kind","verified","marker","preview","typingLabel","time","unreadCount","unreadDot","muted","pinned","outgoingStatus","density","selected","onPress","onLongPress","href","swipeActions","onAction","swipeEnabled","accessibilityLabel","labels","style","testID","theme","paint","pressed","setPressed","text","geo","unread","badge","rowName","markerLabel","label","count","previewColor","textMuted","previewType","previewVariant","prefixStyle","color","draftStyle","negative","fontStyle","previewLine","undefined","accent","size","labelStyle","AttachmentIcon","attachment","draft","body","filter","Boolean","join","flexDirection","alignItems","gap","minWidth","children","width","glyph","height","fill","variant","numberOfLines","flexShrink","sender","timeColor","states","dot","hoverActions","left","right","rowStyle","position","borderRadius","justifyContent","hover","transitionProperty","transitionDuration","backgroundColor","row","bloomChatRow","String","onPressedChange","pointerEvents","importantForAccessibility","paddingLeft","paddingHorizontal","paddingRight","shape","flex","marginLeft","lineGap","nameUnreadVariant","nameVariant","icon","timeVariant","length","bloomChatActions","top","bottom","borderTopRightRadius","borderBottomRightRadius","map","action","hoverFill","ring","key","actions","ChatListItem","displayName"],"sourceRoot":"../../../src","sources":["chat-list/ChatListItem.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/chat-list/ChatListItemSkeleton.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import React from 'react';
+import { View } from 'react-native';
+import * as Skeleton from "../skeleton/index.js";
+import { CHAT_ROW_GEOMETRY } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Placeholder rows with `ChatListItem`'s exact geometry, so the list does not
+ * jump when the conversations arrive. The name and preview widths vary a little
+ * per row — a block of identical bars reads as a table, not as a list of names.
+ *
+ * Hidden from assistive technology: announce loading once on the surrounding
+ * region (`ChatList` does), not eight times.
+ */
+export function ChatListItemSkeleton({
+  count = 1,
+  density = 'comfortable',
+  style,
+  testID
+}) {
+  const geo = CHAT_ROW_GEOMETRY[density];
+  return /*#__PURE__*/_jsx(View, {
+    "aria-hidden": true,
+    importantForAccessibility: "no-hide-descendants",
+    style: style,
+    testID: testID,
+    children: Array.from({
+      length: count
+    }, (_, index) => {
+      const nameWidth = 38 + index * 37 % 26;
+      const previewWidth = 46 + index * 23 % 34;
+      return /*#__PURE__*/_jsxs(View, {
+        style: {
+          flexDirection: 'row',
+          alignItems: 'center',
+          height: geo.height,
+          paddingLeft: geo.paddingHorizontal,
+          paddingRight: geo.paddingHorizontal
+        },
+        testID: testID ? `${testID}-row-${index}` : undefined,
+        children: [/*#__PURE__*/_jsx(Skeleton.Circle, {
+          size: geo.avatar
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            flex: 1,
+            minWidth: 0,
+            marginLeft: geo.gap,
+            gap: geo.lineGap + 3
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+            width: `${nameWidth}%`,
+            height: 12,
+            borderRadius: 4
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: `${previewWidth}%`,
+            height: 10,
+            borderRadius: 4
+          })]
+        }), /*#__PURE__*/_jsxs(View, {
+          style: {
+            alignItems: 'flex-end',
+            gap: geo.lineGap + 3,
+            marginLeft: geo.gap
+          },
+          children: [/*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 32,
+            height: 10,
+            borderRadius: 4
+          }), /*#__PURE__*/_jsx(Skeleton.Box, {
+            width: 18,
+            height: 18,
+            borderRadius: 9
+          })]
+        })]
+      }, index);
+    })
+  });
+}
+//# sourceMappingURL=ChatListItemSkeleton.js.map

package/lib/module/chat-list/ChatListItemSkeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Skeleton","CHAT_ROW_GEOMETRY","jsx","_jsx","jsxs","_jsxs","ChatListItemSkeleton","count","density","style","testID","geo","importantForAccessibility","children","Array","from","length","_","index","nameWidth","previewWidth","flexDirection","alignItems","height","paddingLeft","paddingHorizontal","paddingRight","undefined","Circle","size","avatar","flex","minWidth","marginLeft","gap","lineGap","Box","width","borderRadius"],"sourceRoot":"../../../src","sources":["chat-list/ChatListItemSkeleton.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,QAAQ,cAAc;AAEnC,OAAO,KAAKC,QAAQ,MAAM,sBAAa;AACvC,SAASC,iBAAiB,QAAQ,aAAU;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAG7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,oBAAoBA,CAAC;EACnCC,KAAK,GAAG,CAAC;EACTC,OAAO,GAAG,aAAa;EACvBC,KAAK;EACLC;AACyB,CAAC,EAAE;EAC5B,MAAMC,GAAG,GAAGV,iBAAiB,CAACO,OAAO,CAAC;EACtC,oBACEL,IAAA,CAACJ,IAAI;IACH,mBAAW;IACXa,yBAAyB,EAAC,qBAAqB;IAC/CH,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IAAAG,QAAA,EAEdC,KAAK,CAACC,IAAI,CAAC;MAAEC,MAAM,EAAET;IAAM,CAAC,EAAE,CAACU,CAAC,EAAEC,KAAK,KAAK;MAC3C,MAAMC,SAAS,GAAG,EAAE,GAAKD,KAAK,GAAG,EAAE,GAAI,EAAG;MAC1C,MAAME,YAAY,GAAG,EAAE,GAAKF,KAAK,GAAG,EAAE,GAAI,EAAG;MAC7C,oBACEb,KAAA,CAACN,IAAI;QAEHU,KAAK,EAAE;UACLY,aAAa,EAAE,KAAK;UACpBC,UAAU,EAAE,QAAQ;UACpBC,MAAM,EAAEZ,GAAG,CAACY,MAAM;UAClBC,WAAW,EAAEb,GAAG,CAACc,iBAAiB;UAClCC,YAAY,EAAEf,GAAG,CAACc;QACpB,CAAE;QACFf,MAAM,EAAEA,MAAM,GAAG,GAAGA,MAAM,QAAQQ,KAAK,EAAE,GAAGS,SAAU;QAAAd,QAAA,gBAEtDV,IAAA,CAACH,QAAQ,CAAC4B,MAAM;UAACC,IAAI,EAAElB,GAAG,CAACmB;QAAO,CAAE,CAAC,eACrCzB,KAAA,CAACN,IAAI;UAACU,KAAK,EAAE;YAAEsB,IAAI,EAAE,CAAC;YAAEC,QAAQ,EAAE,CAAC;YAAEC,UAAU,EAAEtB,GAAG,CAACuB,GAAG;YAAEA,GAAG,EAAEvB,GAAG,CAACwB,OAAO,GAAG;UAAE,CAAE;UAAAtB,QAAA,gBAC/EV,IAAA,CAACH,QAAQ,CAACoC,GAAG;YAACC,KAAK,EAAE,GAAGlB,SAAS,GAAI;YAACI,MAAM,EAAE,EAAG;YAACe,YAAY,EAAE;UAAE,CAAE,CAAC,eACrEnC,IAAA,CAACH,QAAQ,CAACoC,GAAG;YAACC,KAAK,EAAE,GAAGjB,YAAY,GAAI;YAACG,MAAM,EAAE,EAAG;YAACe,YAAY,EAAE;UAAE,CAAE,CAAC;QAAA,CACpE,CAAC,eACPjC,KAAA,CAACN,IAAI;UAACU,KAAK,EAAE;YAAEa,UAAU,EAAE,UAAU;YAAEY,GAAG,EAAEvB,GAAG,CAACwB,OAAO,GAAG,CAAC;YAAEF,UAAU,EAAEtB,GAAG,CAACuB;UAAI,CAAE;UAAArB,QAAA,gBACjFV,IAAA,CAACH,QAAQ,CAACoC,GAAG;YAACC,KAAK,EAAE,EAAG;YAACd,MAAM,EAAE,EAAG;YAACe,YAAY,EAAE;UAAE,CAAE,CAAC,eACxDnC,IAAA,CAACH,QAAQ,CAACoC,GAAG;YAACC,KAAK,EAAE,EAAG;YAACd,MAAM,EAAE,EAAG;YAACe,YAAY,EAAE;UAAE,CAAE,CAAC;QAAA,CACpD,CAAC;MAAA,GAlBFpB,KAmBD,CAAC;IAEX,CAAC;EAAC,CACE,CAAC;AAEX","ignoreList":[]}

package/lib/module/chat-list/ChatSearchField.js

@@ -0,0 +1,165 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, TextInput, View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { RiCloseLine } from "../icons/remix/RiCloseLine.js";
+import { RiSearchLine } from "../icons/remix/RiSearchLine.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { borderRadius } from "../styles/tokens.js";
+import { SANS_FONT_FAMILY } from "../text-field/shared.js";
+import { useTheme } from "../theme/use-theme.js";
+import { TYPE_SCALE } from "../typography/scale.js";
+import { ChatGlyphButton } from "./parts.js";
+import { CHAT_LIST_CSS, CHAT_LIST_STYLE_ID, IS_WEB, resolveChatListPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The search pill above the conversations.
+ *
+ *   40 tall, full pill · 10 · search glyph 20 · 8 · input body-medium ·
+ *   clear (×, 28 round) once there is text · any `trailing` slot
+ *
+ *   rest   the background 6% toward the text colour (dark 9%), transparent border
+ *   hover  10% (dark 14%)
+ *   focus  the border takes the text colour — no size change, so nothing reflows
+ *
+ * Pressing anywhere on the pill focuses the input; the pill itself is not a
+ * control, the input is.
+ *
+ * WHY NOT `Search` OR the music library's field. `Search` is a `TextField` with a
+ * floating LABEL — taller, and a label above a one-word search box is chrome a
+ * chat header has no room for. The music field is the right geometry but it is
+ * 48 tall with a Browse toggle and a divider baked in, and reusing it would make
+ * a messaging screen import the music library's whole module graph for a pill.
+ * The shape is small; the coupling would not be.
+ */
+
+export const CHAT_SEARCH_FIELD_HEIGHT = 40;
+const INPUT_TYPE = TYPE_SCALE['body-medium'];
+const inputStyle = {
+  flex: 1,
+  minWidth: 0,
+  fontFamily: SANS_FONT_FAMILY,
+  fontSize: INPUT_TYPE.fontSize,
+  lineHeight: INPUT_TYPE.lineHeight,
+  fontWeight: INPUT_TYPE.fontWeight,
+  height: CHAT_SEARCH_FIELD_HEIGHT - 2,
+  paddingTop: 0,
+  paddingBottom: 0,
+  paddingLeft: 0,
+  paddingRight: 0,
+  borderWidth: 0,
+  backgroundColor: 'transparent'
+};
+function ChatSearchFieldComponent({
+  value,
+  onChangeText,
+  onClear,
+  onSubmit,
+  onFocus,
+  onBlur,
+  placeholder = 'Search',
+  accessibilityLabel = 'Search chats',
+  clearLabel = 'Clear search',
+  trailing,
+  autoFocus,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const inputRef = useRef(null);
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const hasText = value.length > 0;
+  const pillStyle = {
+    height: CHAT_SEARCH_FIELD_HEIGHT,
+    borderRadius: borderRadius.full,
+    borderWidth: 1,
+    borderColor: focused ? paint.text : 'transparent',
+    backgroundColor: hovered && !focused ? paint.selected : paint.hover,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: 10,
+    paddingRight: 6,
+    gap: 8,
+    ...(IS_WEB ? {
+      transitionProperty: 'background-color, border-color',
+      transitionDuration: '120ms'
+    } : null)
+  };
+  return /*#__PURE__*/_jsxs(Pressable
+  // A press on the pill's padding lands in the input. Not a control of its
+  // own: the input is the focusable element.
+  , {
+    accessible: false,
+    ...webDataSet({
+      bloomChatSearchPill: ''
+    }),
+    ...(IS_WEB ? {
+      tabIndex: -1
+    } : null),
+    onPress: () => inputRef.current?.focus(),
+    onHoverIn: () => setHovered(true),
+    onHoverOut: () => setHovered(false),
+    style: [pillStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(RiSearchLine, {
+      width: 20,
+      height: 20,
+      fill: focused ? paint.text : paint.textMuted
+    }), /*#__PURE__*/_jsx(TextInput, {
+      ref: inputRef,
+      ...webDataSet({
+        bloomChatInput: ''
+      }),
+      value: value,
+      onChangeText: onChangeText,
+      onSubmitEditing: onSubmit ? () => onSubmit(value) : undefined,
+      onFocus: () => {
+        setFocused(true);
+        onFocus?.();
+      },
+      onBlur: () => {
+        setFocused(false);
+        onBlur?.();
+      },
+      placeholder: placeholder,
+      placeholderTextColor: paint.textMuted,
+      accessibilityLabel: accessibilityLabel,
+      role: "searchbox",
+      returnKeyType: "search",
+      enterKeyHint: "search",
+      autoCapitalize: "none",
+      autoCorrect: false,
+      autoComplete: "off",
+      autoFocus: autoFocus,
+      keyboardAppearance: theme.isDark ? 'dark' : 'light',
+      style: [inputStyle, {
+        color: paint.text
+      }],
+      testID: testID ? `${testID}-input` : undefined
+    }), hasText ? /*#__PURE__*/_jsx(ChatGlyphButton, {
+      label: clearLabel,
+      icon: RiCloseLine,
+      size: 28,
+      glyph: 18,
+      color: paint.textMuted,
+      hoverFill: paint.selected,
+      ring: paint.ring,
+      onPress: () => {
+        onClear?.();
+        inputRef.current?.focus();
+      },
+      testID: testID ? `${testID}-clear` : undefined
+    }) : null, trailing !== undefined ? /*#__PURE__*/_jsx(View, {
+      children: trailing
+    }) : null]
+  });
+}
+export const ChatSearchField = /*#__PURE__*/memo(ChatSearchFieldComponent);
+ChatSearchField.displayName = 'ChatSearchField';
+//# sourceMappingURL=ChatSearchField.js.map

package/lib/module/chat-list/ChatSearchField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useRef","useState","Pressable","TextInput","View","webDataSet","RiCloseLine","RiSearchLine","adoptStyleSheet","borderRadius","SANS_FONT_FAMILY","useTheme","TYPE_SCALE","ChatGlyphButton","CHAT_LIST_CSS","CHAT_LIST_STYLE_ID","IS_WEB","resolveChatListPaint","jsx","_jsx","jsxs","_jsxs","CHAT_SEARCH_FIELD_HEIGHT","INPUT_TYPE","inputStyle","flex","minWidth","fontFamily","fontSize","lineHeight","fontWeight","height","paddingTop","paddingBottom","paddingLeft","paddingRight","borderWidth","backgroundColor","ChatSearchFieldComponent","value","onChangeText","onClear","onSubmit","onFocus","onBlur","placeholder","accessibilityLabel","clearLabel","trailing","autoFocus","style","testID","theme","paint","inputRef","hovered","setHovered","focused","setFocused","hasText","length","pillStyle","full","borderColor","text","selected","hover","flexDirection","alignItems","gap","transitionProperty","transitionDuration","accessible","bloomChatSearchPill","tabIndex","onPress","current","focus","onHoverIn","onHoverOut","children","width","fill","textMuted","ref","bloomChatInput","onSubmitEditing","undefined","placeholderTextColor","role","returnKeyType","enterKeyHint","autoCapitalize","autoCorrect","autoComplete","keyboardAppearance","isDark","color","label","icon","size","glyph","hoverFill","ring","ChatSearchField","displayName"],"sourceRoot":"../../../src","sources":["chat-list/ChatSearchField.tsx"],"mappings":"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","ignoreList":[]}