@oxy.so/bloom 2.9.0 → 2.11.0

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

@@ -0,0 +1,125 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { UnreadBadge } from "../chat-indicators/index.js";
+import { RiArchiveLine } from "../icons/remix/RiArchiveLine.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { RowLink } from "./parts.js";
+import { CHAT_LIST_CSS, CHAT_LIST_STYLE_ID, CHAT_ROW_GEOMETRY, CHAT_ROW_RADIUS, IS_WEB, resolveChatListPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The archive folder, above the conversations.
+ *
+ * It is a chat row's geometry with a glyph disc where the avatar goes, so the
+ * list keeps one rhythm — the folder is not a different KIND of thing to the
+ * eye, just a destination rather than a person. The count is neutral by default:
+ * the archive is somewhere you go, not a chat asking for attention.
+ */
+
+function ArchivedRowComponent({
+  count,
+  label = 'Archived',
+  icon,
+  onPress,
+  href,
+  density = 'comfortable',
+  muted = true,
+  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 geo = CHAT_ROW_GEOMETRY[density];
+  const showCount = (count ?? 0) > 0;
+  const name = showCount ? `${label}, ${count} ${count === 1 ? 'chat' : 'chats'}` : label;
+  const rowStyle = {
+    position: 'relative',
+    height: geo.height,
+    borderRadius: CHAT_ROW_RADIUS,
+    justifyContent: 'center',
+    '--bloom-chat-hover': paint.hover,
+    '--bloom-chat-selected': paint.selected,
+    ...(IS_WEB ? {
+      transitionProperty: 'background-color',
+      transitionDuration: '120ms'
+    } : {
+      backgroundColor: pressed ? paint.hover : 'transparent'
+    })
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    ...webDataSet({
+      bloomChatRow: '',
+      selected: 'false'
+    }),
+    style: [rowStyle, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(RowLink, {
+      name: name,
+      onPress: onPress,
+      href: href,
+      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(View, {
+        style: {
+          width: geo.avatar,
+          height: geo.avatar,
+          borderRadius: geo.avatar / 2,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: paint.hover
+        },
+        children: icon ?? /*#__PURE__*/_jsx(RiArchiveLine, {
+          width: Math.round(geo.avatar * 0.45),
+          height: Math.round(geo.avatar * 0.45),
+          fill: paint.heading
+        })
+      }), /*#__PURE__*/_jsx(View, {
+        style: {
+          flex: 1,
+          minWidth: 0,
+          marginLeft: geo.gap
+        },
+        children: /*#__PURE__*/_jsx(Text, {
+          variant: geo.nameVariant,
+          numberOfLines: 1,
+          style: {
+            color: paint.text
+          },
+          testID: testID ? `${testID}-label` : undefined,
+          children: label
+        })
+      }), showCount ? /*#__PURE__*/_jsx(UnreadBadge, {
+        count: count,
+        muted: muted,
+        size: density === 'compact' ? 'small' : 'medium',
+        style: {
+          marginLeft: geo.gap
+        },
+        testID: testID ? `${testID}-count` : undefined
+      }) : null]
+    })]
+  });
+}
+export const ArchivedRow = /*#__PURE__*/memo(ArchivedRowComponent);
+ArchivedRow.displayName = 'ArchivedRow';
+//# sourceMappingURL=ArchivedRow.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useState","View","webDataSet","UnreadBadge","RiArchiveLine","adoptStyleSheet","useTheme","Text","RowLink","CHAT_LIST_CSS","CHAT_LIST_STYLE_ID","CHAT_ROW_GEOMETRY","CHAT_ROW_RADIUS","IS_WEB","resolveChatListPaint","jsx","_jsx","jsxs","_jsxs","ArchivedRowComponent","count","label","icon","onPress","href","density","muted","style","testID","theme","paint","pressed","setPressed","geo","showCount","name","rowStyle","position","height","borderRadius","justifyContent","hover","selected","transitionProperty","transitionDuration","backgroundColor","bloomChatRow","children","onPressedChange","undefined","pointerEvents","importantForAccessibility","flexDirection","alignItems","paddingLeft","paddingHorizontal","paddingRight","width","avatar","Math","round","fill","heading","flex","minWidth","marginLeft","gap","variant","nameVariant","numberOfLines","color","text","size","ArchivedRow","displayName"],"sourceRoot":"../../../src","sources":["chat-list/ArchivedRow.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,149 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import { Pressable, ScrollView, View } from 'react-native';
+import { webDataSet } from "../styles/web-data.js";
+import { UnreadBadge } from "../chat-indicators/index.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.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";
+/**
+ * All / Unread / Groups / Channels / Bots, with each folder's unread count.
+ *
+ * A horizontally scrolling tablist: the selected tab's label takes the text
+ * colour and a 2px accent underline sits under it, flush with the strip's
+ * hairline. Hover is a colour change only.
+ *
+ * WHY NOT `CategoryBar`. The two look adjacent and are not: `CategoryBar` is an
+ * ICON over a label (its `icon` is required, and it sizes and tints it), it
+ * carries no per-item count, and it marks the selection with a heavier label
+ * rather than an underline. Adding a badge slot and an icon-less mode to it
+ * would make one component answer two shapes; this is 90 lines and says what it
+ * is. Both are `role="tablist"`, so an app that wants stays-style icon
+ * categories still has one.
+ *
+ * ACCESSIBILITY: `role="tablist"` named by `accessibilityLabel`; each tab is a
+ * `role="tab"` carrying BOTH `aria-selected` (which is all react-native-web
+ * reads) and `accessibilityState.selected` (which is all React Native reads),
+ * and a name that includes the count — "Unread, 12 unread" — because the badge
+ * is a number with no label of its own.
+ */
+
+const TAB_HEIGHT = 44;
+const UNDERLINE = 2;
+function ChatFolderTabsComponent({
+  folders,
+  value,
+  defaultValue,
+  onValueChange,
+  accessibilityLabel,
+  gap = 4,
+  paddingHorizontal = 8,
+  divider = true,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const [inner, setInner] = useState(defaultValue ?? folders[0]?.key ?? '');
+  const [hovered, setHovered] = useState(null);
+  const selected = value ?? inner;
+  const select = key => {
+    if (value === undefined) setInner(key);
+    onValueChange?.(key);
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: [divider ? {
+      borderBottomWidth: 1,
+      borderBottomColor: paint.divider
+    } : null, style],
+    testID: testID,
+    children: /*#__PURE__*/_jsx(ScrollView, {
+      ...webDataSet({
+        bloomChatScrollX: ''
+      }),
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap,
+        paddingLeft: paddingHorizontal,
+        paddingRight: paddingHorizontal
+      },
+      children: /*#__PURE__*/_jsx(View, {
+        role: "tablist",
+        accessibilityLabel: accessibilityLabel,
+        style: {
+          flexDirection: 'row',
+          gap
+        },
+        children: folders.map(folder => {
+          const active = folder.key === selected;
+          const showCount = (folder.unreadCount ?? 0) > 0;
+          const name = showCount ? `${folder.label}, ${folder.unreadCount} unread` : folder.label;
+          const tabStyle = {
+            height: TAB_HEIGHT,
+            paddingLeft: 12,
+            paddingRight: 12,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 6,
+            borderBottomWidth: UNDERLINE,
+            borderBottomColor: active ? paint.accent : 'transparent',
+            '--bloom-chat-ring': paint.ring,
+            ...(IS_WEB ? {
+              transitionProperty: 'border-color, color',
+              transitionDuration: '120ms'
+            } : null)
+          };
+          return /*#__PURE__*/_jsxs(Pressable, {
+            ...webDataSet({
+              bloomChatFocusable: ''
+            }),
+            role: "tab",
+            accessibilityLabel: name,
+            "aria-selected": active,
+            accessibilityState: {
+              selected: active
+            },
+            onPress: () => select(folder.key),
+            onHoverIn: () => setHovered(folder.key),
+            onHoverOut: () => setHovered(current => current === folder.key ? null : current),
+            style: tabStyle,
+            testID: testID ? `${testID}-tab-${folder.key}` : undefined,
+            children: [/*#__PURE__*/_jsx(Text, {
+              variant: active ? 'body-semibold' : 'body-medium',
+              numberOfLines: 1,
+              style: {
+                color: active || hovered === folder.key ? paint.text : paint.textMuted
+              },
+              children: folder.label
+            }), showCount ?
+            /*#__PURE__*/
+            // Hidden: the tab's own name already carries the count, and a
+            // badge that names itself makes the tab announce it twice.
+            _jsx(View, {
+              "aria-hidden": true,
+              importantForAccessibility: "no-hide-descendants",
+              children: /*#__PURE__*/_jsx(UnreadBadge, {
+                count: folder.unreadCount,
+                muted: folder.muted ?? !active,
+                size: "small",
+                testID: testID ? `${testID}-count-${folder.key}` : undefined
+              })
+            }) : null]
+          }, folder.key);
+        })
+      })
+    })
+  });
+}
+export const ChatFolderTabs = /*#__PURE__*/memo(ChatFolderTabsComponent);
+ChatFolderTabs.displayName = 'ChatFolderTabs';
+//# sourceMappingURL=ChatFolderTabs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","useState","Pressable","ScrollView","View","webDataSet","UnreadBadge","adoptStyleSheet","useTheme","Text","CHAT_LIST_CSS","CHAT_LIST_STYLE_ID","IS_WEB","resolveChatListPaint","jsx","_jsx","jsxs","_jsxs","TAB_HEIGHT","UNDERLINE","ChatFolderTabsComponent","folders","value","defaultValue","onValueChange","accessibilityLabel","gap","paddingHorizontal","divider","style","testID","theme","paint","inner","setInner","key","hovered","setHovered","selected","select","undefined","borderBottomWidth","borderBottomColor","children","bloomChatScrollX","horizontal","showsHorizontalScrollIndicator","contentContainerStyle","flexDirection","alignItems","paddingLeft","paddingRight","role","map","folder","active","showCount","unreadCount","name","label","tabStyle","height","accent","ring","transitionProperty","transitionDuration","bloomChatFocusable","accessibilityState","onPress","onHoverIn","onHoverOut","current","variant","numberOfLines","color","text","textMuted","importantForAccessibility","count","muted","size","ChatFolderTabs","displayName"],"sourceRoot":"../../../src","sources":["chat-list/ChatFolderTabs.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,153 @@
+"use strict";
+
+import React, { memo, useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { ArchivedRow } from "./ArchivedRow.js";
+import { ChatListItem } from "./ChatListItem.js";
+import { ChatListItemSkeleton } from "./ChatListItemSkeleton.js";
+import { SectionHeading } from "./parts.js";
+import { CHAT_EMPTY_ICON, CHAT_LIST_CSS, CHAT_LIST_STYLE_ID, CHAT_ROW_GEOMETRY, resolveChatListPaint } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The conversations screen's list: sections, an archive row, the rows, and the
+ * empty and loading states.
+ *
+ * `sections` renders each group under its own heading ("Pinned", "All"); the
+ * `chats` shorthand is one unlabelled run. The `archived` row is pinned above
+ * the first section — it is a destination, not a conversation, so it never sorts
+ * in among them.
+ *
+ * It MAPS every chat, which is right for the few hundred a phone shows. For a
+ * longer list render `ChatListItem` yourself inside a virtualised list; every
+ * row prop is on `ChatSummary` and nothing here holds list state.
+ *
+ * `header` and `footer` are where the stories row, the folder tabs and the
+ * search field go — they belong to the SCREEN, and putting them inside the list
+ * is the only reason the whole thing scrolls as one.
+ *
+ * ACCESSIBILITY: a `role="list"` named `accessibilityLabel`, each section a
+ * nested list named by its heading. While `loading` the region is `aria-busy`
+ * and the placeholder rows are hidden, so "loading" is announced once rather
+ * than eight times.
+ */
+
+function ChatListComponent({
+  sections,
+  chats,
+  density = 'comfortable',
+  selectedId,
+  onChatPress,
+  onChatLongPress,
+  onChatAction,
+  swipeEnabled,
+  archived,
+  loading = false,
+  loadingCount = 8,
+  header,
+  footer,
+  empty,
+  labels,
+  accessibilityLabel = 'Chats',
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  useEffect(() => {
+    adoptStyleSheet(CHAT_LIST_STYLE_ID, CHAT_LIST_CSS);
+  }, []);
+  const paint = useMemo(() => resolveChatListPaint(theme), [theme]);
+  const geo = CHAT_ROW_GEOMETRY[density];
+  const resolved = useMemo(() => {
+    if (sections !== undefined) return sections;
+    if (chats !== undefined) return [{
+      key: 'all',
+      chats
+    }];
+    return [];
+  }, [chats, sections]);
+  const total = resolved.reduce((sum, section) => sum + section.chats.length, 0);
+  const EmptyIcon = CHAT_EMPTY_ICON;
+  const body = loading ? /*#__PURE__*/_jsx(ChatListItemSkeleton, {
+    count: loadingCount,
+    density: density,
+    testID: testID ? `${testID}-skeleton` : undefined
+  }) : total === 0 ? empty ?? /*#__PURE__*/_jsxs(View, {
+    style: {
+      paddingLeft: geo.paddingHorizontal,
+      paddingRight: geo.paddingHorizontal,
+      paddingTop: 48,
+      paddingBottom: 48,
+      alignItems: 'center',
+      gap: 8
+    },
+    testID: testID ? `${testID}-empty` : undefined,
+    children: [/*#__PURE__*/_jsx(EmptyIcon, {
+      width: 32,
+      height: 32,
+      fill: paint.heading
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "headline-semibold",
+      style: {
+        color: paint.text,
+        textAlign: 'center'
+      },
+      children: labels?.emptyTitle ?? 'No conversations yet'
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "body-regular",
+      style: {
+        color: paint.textMuted,
+        textAlign: 'center',
+        maxWidth: 260
+      },
+      children: labels?.emptyDescription ?? 'Start a chat and it will show up here.'
+    })]
+  }) : resolved.map(section => /*#__PURE__*/_jsxs(View, {
+    children: [section.title !== undefined ? /*#__PURE__*/_jsx(SectionHeading, {
+      title: section.title,
+      paint: paint,
+      paddingHorizontal: geo.paddingHorizontal,
+      testID: testID ? `${testID}-heading-${section.key}` : undefined
+    }) : null, /*#__PURE__*/_jsx(View, {
+      ...(section.title !== undefined ? {
+        role: 'list',
+        accessibilityLabel: section.title
+      } : null),
+      children: section.chats.map(({
+        id,
+        ...chat
+      }) => /*#__PURE__*/_jsx(ChatListItem, {
+        ...chat,
+        density: density,
+        selected: selectedId === id,
+        swipeEnabled: swipeEnabled ?? chat.swipeEnabled,
+        onPress: onChatPress ? () => onChatPress(id) : undefined,
+        onLongPress: onChatLongPress ? () => onChatLongPress(id) : undefined,
+        onAction: onChatAction ? key => onChatAction(key, id) : undefined,
+        testID: testID ? `${testID}-chat-${id}` : undefined
+      }, id))
+    })]
+  }, section.key));
+  return /*#__PURE__*/_jsxs(View, {
+    role: "list",
+    accessibilityLabel: accessibilityLabel,
+    ...(loading ? {
+      'aria-busy': true,
+      accessibilityState: {
+        busy: true
+      }
+    } : null),
+    style: style,
+    testID: testID,
+    children: [header, archived !== undefined ? /*#__PURE__*/_jsx(ArchivedRow, {
+      ...archived,
+      density: archived.density ?? density,
+      testID: testID ? `${testID}-archived` : undefined
+    }) : null, body, footer]
+  });
+}
+export const ChatList = /*#__PURE__*/memo(ChatListComponent);
+ChatList.displayName = 'ChatList';
+//# sourceMappingURL=ChatList.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["React","memo","useEffect","useMemo","View","adoptStyleSheet","useTheme","Text","ArchivedRow","ChatListItem","ChatListItemSkeleton","SectionHeading","CHAT_EMPTY_ICON","CHAT_LIST_CSS","CHAT_LIST_STYLE_ID","CHAT_ROW_GEOMETRY","resolveChatListPaint","jsx","_jsx","jsxs","_jsxs","ChatListComponent","sections","chats","density","selectedId","onChatPress","onChatLongPress","onChatAction","swipeEnabled","archived","loading","loadingCount","header","footer","empty","labels","accessibilityLabel","style","testID","theme","paint","geo","resolved","undefined","key","total","reduce","sum","section","length","EmptyIcon","body","count","paddingLeft","paddingHorizontal","paddingRight","paddingTop","paddingBottom","alignItems","gap","children","width","height","fill","heading","variant","color","text","textAlign","emptyTitle","textMuted","maxWidth","emptyDescription","map","title","role","id","chat","selected","onPress","onLongPress","onAction","accessibilityState","busy","ChatList","displayName"],"sourceRoot":"../../../src","sources":["chat-list/ChatList.tsx"],"mappings":"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","ignoreList":[]}