@oxy.so/bloom 3.6.0 → 4.0.0

package/lib/module/mail-list/shared.js

@@ -0,0 +1,375 @@
+"use strict";
+
+import { Platform } from 'react-native';
+import { RiInbox2Line } from "../icons/remix/RiInbox2Line.js";
+import { hairlineOn, surfaceFillOn, surfaceTextOn } from "../styles/surface-levels.js";
+import { resolveAccentColors } from "../theme/accent-colors.js";
+export const IS_WEB = Platform.OS === 'web';
+
+/** The glyph an empty inbox draws. */
+export const MAIL_EMPTY_ICON = RiInbox2Line;
+
+// ---------------------------------------------------------------------------
+//  Geometry — the whole difference between the two densities
+// ---------------------------------------------------------------------------
+
+/**
+ * 64 tall with two lines on a phone, 40 tall with one on a desktop. The avatar
+ * is centred in both, so a row with no snippet is the same height as one with a
+ * snippet and a label.
+ *
+ * The phone rung is the same 72/48 as a `chat-list` row on purpose: a mail row
+ * and a conversation row are the same kind of object, and an inbox that stands
+ * 16px taller per row than the messages screen reads as a different library.
+ * Two lines is what pays for it — the sender and the time share the first, the
+ * subject and the snippet the second.
+ */
+export const MAIL_ROW_GEOMETRY = {
+  comfortable: {
+    // 64, not the chat row's 72: a mail row carries no presence dot, no typing
+    // line and no delivery ticks, so the same 72 left a band of empty pixels
+    // under every second line. The two lines, the 40 mark and 12/14 of inset
+    // are what close it without the text touching the row's edge.
+    minHeight: 64,
+    paddingVertical: 12,
+    paddingHorizontal: 14,
+    avatar: 40,
+    gap: 10,
+    lineGap: 2,
+    glyph: 16,
+    senderWidth: 0,
+    senderMinWidth: 0,
+    senderMaxWidth: '100%',
+    senderVariant: 'headline-regular',
+    senderUnreadVariant: 'headline-semibold',
+    subjectVariant: 'body-regular',
+    subjectUnreadVariant: 'body-semibold',
+    snippetVariant: 'body-regular',
+    timeVariant: 'caption-1-regular',
+    action: 44,
+    actionGlyph: 18,
+    starControl: 24
+  },
+  compact: {
+    minHeight: 40,
+    height: 40,
+    paddingVertical: 0,
+    paddingHorizontal: 12,
+    avatar: 24,
+    gap: 10,
+    lineGap: 0,
+    glyph: 14,
+    senderWidth: 180,
+    senderMinWidth: 88,
+    senderMaxWidth: '34%',
+    senderVariant: 'body-2-regular',
+    senderUnreadVariant: 'body-2-semibold',
+    subjectVariant: 'body-2-regular',
+    subjectUnreadVariant: 'body-2-semibold',
+    snippetVariant: 'body-2-regular',
+    timeVariant: 'caption-2-regular',
+    action: 28,
+    actionGlyph: 16,
+    starControl: 24
+  }
+};
+
+/** Corner radius of a row's hover/selected fill. A row is a surface, not a control. */
+export const MAIL_ROW_RADIUS = 10;
+
+/**
+ * The touch target every row control is grown to with `hitSlop`, whatever it
+ * DRAWS. Drawing at 44 instead would make the control set the row's height.
+ */
+export const MAIL_TOUCH_TARGET = 44;
+
+/**
+ * The label mark a two-line row draws when there is no width for a second chip.
+ * A dot says "this one carries another label" in 8px; the row's composed name
+ * is where its NAME is, and always was.
+ */
+export const MAIL_LABEL_DOT = 8;
+
+/** The selection bar's height, per density. */
+export const MAIL_SELECTION_BAR_HEIGHT = {
+  comfortable: 56,
+  compact: 44
+};
+
+// ---------------------------------------------------------------------------
+//  Paint
+// ---------------------------------------------------------------------------
+
+/**
+ * Every colour this family paints, derived from the fill it was handed.
+ *
+ * Nothing here is a ramp stop. The hovered and the selected row are the first
+ * and second rungs of the surface ladder measured off the ACTUAL parent, so a
+ * list inside a card and a list on the page each step off their own background;
+ * the text rungs are floored against that same fill; and the accent, the
+ * selection bar and the draft colour come from `resolveAccentColors`.
+ */
+export function resolveMailPaint(theme, surface) {
+  const hover = surfaceFillOn(theme, surface);
+  const bar = resolveAccentColors(theme.colors, 'primary', 'subtle');
+  return {
+    surface,
+    hover,
+    selected: surfaceFillOn(theme, hover),
+    hairline: hairlineOn(theme, surface),
+    accent: resolveAccentColors(theme.colors, 'primary', 'outlined').foreground,
+    barFill: bar.background,
+    barText: bar.foreground,
+    negative: resolveAccentColors(theme.colors, 'error', 'outlined').foreground,
+    ...surfaceTextOn(theme, surface)
+  };
+}
+
+/** A label dot's fill: the tone's SOLID pair, so it reads at 8px. */
+export function labelDotColor(theme, label) {
+  return resolveAccentColors(theme.colors, label.tone ?? 'default', 'solid').background;
+}
+
+/** The glyph colour an action's tone paints on the row. */
+export function mailActionColor(action, paint) {
+  switch (action.tone) {
+    case 'negative':
+      return paint.negative;
+    case 'accent':
+      return paint.accent;
+    default:
+      return paint.textSecondary;
+  }
+}
+
+// ---------------------------------------------------------------------------
+//  Strings
+// ---------------------------------------------------------------------------
+
+export const DEFAULT_MAIL_STRINGS = {
+  draft: 'Draft:',
+  unread: 'Unread',
+  starred: 'Starred',
+  star: 'Star',
+  attachment: 'Has attachment',
+  select: 'Select',
+  threadCount: count => `${count} messages`,
+  moreLabels: count => `${count} more labels`,
+  selectedCount: count => count === 1 ? '1 selected' : `${count} selected`,
+  selectAll: 'Select all',
+  clearSelection: 'Clear selection',
+  emptyTitle: 'Nothing here',
+  emptyDescription: 'New mail lands in this folder.',
+  today: 'Today',
+  yesterday: 'Yesterday'
+};
+export function mailStrings(overrides) {
+  return overrides === undefined ? DEFAULT_MAIL_STRINGS : {
+    ...DEFAULT_MAIL_STRINGS,
+    ...overrides
+  };
+}
+
+// ---------------------------------------------------------------------------
+//  Pure logic
+// ---------------------------------------------------------------------------
+
+/**
+ * The label chips a row draws, and how many it swallowed.
+ *
+ * `max` is a count of CHIPS, and the overflow chip is one of them: at `max = 2`
+ * with four labels the row draws one label and a "+3", never two labels and a
+ * "+2" in the space of three. Pure.
+ */
+export function visibleLabels(labels, max) {
+  if (labels === undefined || labels.length === 0) return {
+    shown: [],
+    overflow: 0
+  };
+  if (max <= 0) return {
+    shown: [],
+    overflow: labels.length
+  };
+  if (labels.length <= max) return {
+    shown: labels,
+    overflow: 0
+  };
+  return {
+    shown: labels.slice(0, max - 1),
+    overflow: labels.length - (max - 1)
+  };
+}
+
+/**
+ * The label marks a TWO-LINE row draws: one chip, then a dot per label that did
+ * not fit, `max` marks in all.
+ *
+ * A two-line row has one line for the subject and the snippet, and a second
+ * chip on it costs more width than a second label is worth. So the first label
+ * keeps its name and the rest become presence — the row still says "there are
+ * three of these" without spending the subject's width on it, and
+ * `composeMailRowName` still reads every one of them aloud.
+ *
+ * `max` counts MARKS, chip included, exactly as `maxLabels` counts chips on a
+ * one-line row: at 2 with four labels the row draws one chip and one dot. Pure.
+ */
+export function labelMarks(labels, max, named = true) {
+  if (labels === undefined || labels.length === 0 || max <= 0) return {
+    dots: []
+  };
+  // `named: false` is the two-line row: a named chip there sits on the subject's
+  // own line and takes width from the thing the row is read for. The label is
+  // still announced — `composeMailRowName` says all of them — so the dot is a
+  // reminder, not the only carrier.
+  if (!named) return {
+    dots: labels.slice(0, max)
+  };
+  return {
+    chip: labels[0],
+    dots: labels.slice(1, max)
+  };
+}
+
+/**
+ * This family's actions as the swipe rail's, which is the same list in the one
+ * vocabulary `SwipeRow` speaks. Only the neutral tone is spelled differently —
+ * a mail action has no tone or a `'default'` one, a pane calls that `'neutral'`
+ * — and translating it here is what lets the two families share one drag
+ * implementation instead of one of them renaming its own tones. Pure.
+ */
+export function toSwipeActions(actions) {
+  const side = list => list === undefined ? undefined : list.map(action => ({
+    key: action.key,
+    label: action.label,
+    icon: action.icon,
+    tone: action.tone === 'negative' ? 'negative' : action.tone === 'accent' ? 'accent' : 'neutral',
+    onPress: action.onPress
+  }));
+  return {
+    left: side(actions.left),
+    right: side(actions.right)
+  };
+}
+/**
+ * Everything the row's glyphs say, as ONE name.
+ *
+ * The row is one target and the content is hidden from assistive technology, so
+ * a reader that only got the sender and the subject would be missing the four
+ * states nothing on the row spells out: unread, starred, an attachment and how
+ * many messages the thread holds. The ORDER is the reading order — who, what,
+ * the first words, when, then the states, then the labels. Pure.
+ */
+export function composeMailRowName(input, strings) {
+  const snippet = input.draft === true ? [strings.draft, input.snippet].filter(Boolean).join(' ') : input.snippet;
+  return [input.sender, input.subject, snippet, input.time, input.unread === true ? strings.unread : null, input.starred === true ? strings.starred : null, input.hasAttachment === true ? strings.attachment : null, (input.threadCount ?? 0) > 1 ? strings.threadCount(input.threadCount) : null, ...(input.labels ?? []).map(label => label.name)].filter(part => typeof part === 'string' && part.length > 0).join(', ');
+}
+
+/** Local-midnight day index, so "yesterday" is a calendar day and not 24 hours. */
+function dayIndex(at) {
+  const d = new Date(at);
+  return Math.floor((Date.UTC(d.getFullYear(), d.getMonth(), d.getDate()) - Date.UTC(1970, 0, 1)) / 86_400_000);
+}
+
+/**
+ * A flat list bucketed into day sections, newest bucket first, keeping each
+ * bucket's input order.
+ *
+ * "Today" and "Yesterday" are CALENDAR days in the reader's own time zone, not
+ * 24-hour windows — a message from 23:50 last night is yesterday's at 00:10,
+ * which is what a person means by it. A mail with no `date` falls into one
+ * trailing untitled bucket rather than being dropped.
+ *
+ * Pure, and every input it could decide for itself is a parameter: `now` and
+ * the date format, so the same call is the same sections in a test in June as
+ * in a test in December.
+ */
+export function groupMailByDay(mails, options = {}) {
+  const {
+    now = Date.now(),
+    strings,
+    formatDate = date => date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric'
+    })
+  } = options;
+  const today = dayIndex(now);
+  const todayLabel = strings?.today ?? DEFAULT_MAIL_STRINGS.today;
+  const yesterdayLabel = strings?.yesterday ?? DEFAULT_MAIL_STRINGS.yesterday;
+  const buckets = new Map();
+  const undated = [];
+  for (const mail of mails) {
+    if (mail.date === undefined) {
+      undated.push(mail);
+      continue;
+    }
+    const day = dayIndex(mail.date);
+    const bucket = buckets.get(day);
+    if (bucket === undefined) buckets.set(day, [mail]);else bucket.push(mail);
+  }
+  const sections = [...buckets.keys()].sort((a, b) => b - a).map(day => {
+    const title = day === today ? todayLabel : day === today - 1 ? yesterdayLabel : formatDate(new Date(day * 86_400_000));
+    return {
+      key: `day-${day}`,
+      title,
+      mails: buckets.get(day)
+    };
+  });
+  if (undated.length > 0) sections.push({
+    key: 'undated',
+    mails: undated
+  });
+  return sections;
+}
+
+// ---------------------------------------------------------------------------
+//  Web stylesheet
+//
+//  Hover and keyboard-focus affordances no inline style can carry. The hooks
+//  are `data-*` attributes through `webDataSet`, and `adoptStyleSheet` no-ops
+//  without a `document`, so this file stays universal.
+// ---------------------------------------------------------------------------
+
+export const MAIL_LIST_STYLE_ID = 'bloom-mail-list-web-css';
+const ROW = '[data-bloom-mail-row]';
+const FOCUSABLE = '[data-bloom-mail-focusable]';
+const RAIL = '[data-bloom-mail-rail]';
+export const MAIL_LIST_CSS = `
+${FOCUSABLE} {
+  outline: none;
+  cursor: pointer;
+  user-select: none;
+}
+${FOCUSABLE}:focus-visible {
+  outline: 2px solid var(--bloom-mail-ring, currentColor);
+  outline-offset: -2px;
+}
+${ROW}:hover,
+${ROW}:focus-within {
+  background-color: var(--bloom-mail-hover, transparent);
+}
+${ROW}[data-selected="true"],
+${ROW}[data-selected="true"]:hover {
+  background-color: var(--bloom-mail-selected, transparent);
+}
+${RAIL} {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease-out;
+}
+${ROW}:hover ${RAIL},
+${ROW}:focus-within ${RAIL} {
+  opacity: 1;
+  pointer-events: auto;
+}
+@media (hover: none) {
+  ${RAIL} {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  ${RAIL} {
+    transition: none;
+  }
+}
+`;
+//# sourceMappingURL=shared.js.map

package/lib/module/mail-list/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Platform","RiInbox2Line","hairlineOn","surfaceFillOn","surfaceTextOn","resolveAccentColors","IS_WEB","OS","MAIL_EMPTY_ICON","MAIL_ROW_GEOMETRY","comfortable","minHeight","paddingVertical","paddingHorizontal","avatar","gap","lineGap","glyph","senderWidth","senderMinWidth","senderMaxWidth","senderVariant","senderUnreadVariant","subjectVariant","subjectUnreadVariant","snippetVariant","timeVariant","action","actionGlyph","starControl","compact","height","MAIL_ROW_RADIUS","MAIL_TOUCH_TARGET","MAIL_LABEL_DOT","MAIL_SELECTION_BAR_HEIGHT","resolveMailPaint","theme","surface","hover","bar","colors","selected","hairline","accent","foreground","barFill","background","barText","negative","labelDotColor","label","tone","mailActionColor","paint","textSecondary","DEFAULT_MAIL_STRINGS","draft","unread","starred","star","attachment","select","threadCount","count","moreLabels","selectedCount","selectAll","clearSelection","emptyTitle","emptyDescription","today","yesterday","mailStrings","overrides","undefined","visibleLabels","labels","max","length","shown","overflow","slice","labelMarks","named","dots","chip","toSwipeActions","actions","side","list","map","key","icon","onPress","left","right","composeMailRowName","input","strings","snippet","filter","Boolean","join","sender","subject","time","hasAttachment","name","part","dayIndex","at","d","Date","Math","floor","UTC","getFullYear","getMonth","getDate","groupMailByDay","mails","options","now","formatDate","date","toLocaleDateString","month","day","todayLabel","yesterdayLabel","buckets","Map","undated","mail","push","bucket","get","set","sections","keys","sort","a","b","title","MAIL_LIST_STYLE_ID","ROW","FOCUSABLE","RAIL","MAIL_LIST_CSS"],"sourceRoot":"../../../src","sources":["mail-list/shared.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/mail-list/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=types.js.map

package/lib/module/mail-list/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["mail-list/types.ts"],"mappings":"","ignoreList":[]}

package/lib/module/mail-thread/MailAddressLine.js

@@ -0,0 +1,92 @@
+"use strict";
+
+import React, { useEffect, useMemo } from 'react';
+import { View } from 'react-native';
+import { Button } from '../button';
+import { useControllableState } from "../hooks/use-controllable-state.js";
+import { resolveMailPaint } from "../mail-list/shared.js";
+import { adoptStyleSheet } from "../styles/adopt-style-sheet.js";
+import { useSurfaceFill } from "../styles/surface-levels.js";
+import { useTheme } from "../theme/use-theme.js";
+import { Text } from "../typography/index.js";
+import { MAIL_THREAD_CSS, MAIL_THREAD_STYLE_ID, addressName, mailThreadStrings, visibleAddresses } from "./shared.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * One `to` or `cc` line: the label, the names, and the overflow.
+ *
+ * THE OVERFLOW IS A CONTROL, NOT AN ELLIPSIS. A line truncated with "…" tells
+ * the reader there are more recipients and gives them no way to find out who —
+ * which, on a message they are about to reply-all to, is the one fact that
+ * changes what they write. So the surplus collapses into a "+3 more" button
+ * that reveals the rest in place, and the names stay selectable text either way.
+ *
+ * It draws a `to`/`cc` line inside a message header and it draws the same line
+ * anywhere else — a reading pane's summary, a confirmation dialog. It owns no
+ * state it does not have to: give it `expanded` and it is controlled.
+ */
+export function MailAddressLine({
+  label,
+  addresses,
+  maxVisible = 3,
+  expanded,
+  onExpandedChange,
+  strings,
+  style,
+  testID
+}) {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  useEffect(() => {
+    adoptStyleSheet(MAIL_THREAD_STYLE_ID, MAIL_THREAD_CSS);
+  }, []);
+  const paint = useMemo(() => resolveMailPaint(theme, surface), [theme, surface]);
+  const text = useMemo(() => mailThreadStrings(strings), [strings]);
+  const [open, setOpen] = useControllableState({
+    value: expanded,
+    defaultValue: false,
+    onChange: onExpandedChange
+  });
+  const {
+    shown,
+    overflow
+  } = visibleAddresses(addresses, open ? 0 : maxVisible);
+  if (addresses.length === 0) return null;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [{
+      flexDirection: 'row',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: 4,
+      minWidth: 0
+    }, style],
+    testID: testID,
+    children: [/*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      style: {
+        color: paint.textTertiary,
+        flexShrink: 0
+      },
+      testID: testID ? `${testID}-label` : undefined,
+      children: label
+    }), /*#__PURE__*/_jsx(Text, {
+      variant: "caption-1-regular",
+      numberOfLines: open ? undefined : 1,
+      style: {
+        color: paint.textSecondary,
+        flexShrink: 1,
+        minWidth: 0
+      },
+      testID: testID ? `${testID}-names` : undefined,
+      children: shown.map(addressName).join(', ')
+    }), overflow > 0 ? /*#__PURE__*/_jsx(Button, {
+      variant: "link",
+      size: "xs",
+      linkTone: "secondary",
+      onPress: () => setOpen(true),
+      accessibilityLabel: text.moreAddresses(overflow),
+      testID: testID ? `${testID}-more` : undefined,
+      children: `+${overflow}`
+    }) : null]
+  });
+}
+//# sourceMappingURL=MailAddressLine.js.map

package/lib/module/mail-thread/MailAddressLine.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useEffect","useMemo","View","Button","useControllableState","resolveMailPaint","adoptStyleSheet","useSurfaceFill","useTheme","Text","MAIL_THREAD_CSS","MAIL_THREAD_STYLE_ID","addressName","mailThreadStrings","visibleAddresses","jsx","_jsx","jsxs","_jsxs","MailAddressLine","label","addresses","maxVisible","expanded","onExpandedChange","strings","style","testID","theme","surface","paint","text","open","setOpen","value","defaultValue","onChange","shown","overflow","length","flexDirection","alignItems","flexWrap","gap","minWidth","children","variant","color","textTertiary","flexShrink","undefined","numberOfLines","textSecondary","map","join","size","linkTone","onPress","accessibilityLabel","moreAddresses"],"sourceRoot":"../../../src","sources":["mail-thread/MailAddressLine.tsx"],"mappings":"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","ignoreList":[]}