hs-uix 1.6.5 → 2.0.0

package/dist/feed.mjs

@@ -0,0 +1,927 @@
+// packages/feed/src/Feed.jsx
+import React2, { useEffect, useMemo, useState } from "react";
+import {
+  Alert,
+  Box,
+  Button,
+  ButtonRow,
+  DateInput,
+  DescriptionList,
+  DescriptionListItem,
+  Divider,
+  EmptyState,
+  Flex,
+  Icon,
+  Inline,
+  Link,
+  List,
+  MultiSelect,
+  SearchInput,
+  Select,
+  StatusTag,
+  Tab,
+  Tabs,
+  Tag,
+  Text,
+  Tile
+} from "@hubspot/ui-extensions";
+
+// src/common-components/AvatarStack.js
+import React from "react";
+import { Image } from "@hubspot/ui-extensions";
+
+// src/common-components/svgDefaults.js
+var HS_FONT_FAMILY = '"Lexend Deca", Helvetica, Arial, sans-serif';
+var HS_TEXT_COLOR = "#33475b";
+var HS_NEUTRAL_CHIP = "#CBD6E2";
+
+// src/common-components/AvatarStack.js
+var DEFAULT_COLORS = [
+  "#0091ae",
+  "#8B0000",
+  "#ff5c35",
+  "#00bda5",
+  "#fdcc00",
+  "#516f90",
+  "#003366",
+  "#8e7cc3"
+];
+var SIZE_TOKENS = {
+  xs: 16,
+  "extra-small": 16,
+  sm: 20,
+  "small": 20,
+  md: 24,
+  "med": 24,
+  "medium": 24,
+  lg: 32,
+  "large": 32,
+  xl: 40,
+  "extra-large": 40
+};
+var resolveSize = (size) => {
+  if (typeof size === "number") return size;
+  if (typeof size === "string" && SIZE_TOKENS[size] != null) return SIZE_TOKENS[size];
+  return 24;
+};
+var isImageUri = (s) => typeof s === "string" && /^(https?:|data:image\/)/i.test(s);
+var escapeXmlAttr = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+var pickColor = (key, palette, index) => {
+  if (!key) return palette[index % palette.length];
+  const code = String(key).charCodeAt(0) || 0;
+  return palette[(code + index) % palette.length];
+};
+var normalizeEntry = (entry) => {
+  if (entry == null) return null;
+  if (typeof entry === "string") {
+    if (entry.length === 0) return null;
+    if (isImageUri(entry)) return { src: entry };
+    return { letter: entry.slice(0, 2).toUpperCase() };
+  }
+  if (typeof entry === "object") {
+    if (entry.src) return { src: entry.src, letter: entry.letter };
+    if (entry.letter) return { letter: String(entry.letter).slice(0, 2).toUpperCase(), color: entry.color };
+  }
+  return null;
+};
+var makeAvatarStackDataUri = (rawEntries, opts = {}) => {
+  const {
+    size: sizeProp = "medium",
+    step: stepProp,
+    overlap: overlapProp,
+    maxVisible = 4,
+    colors = DEFAULT_COLORS,
+    overflowBg = HS_NEUTRAL_CHIP,
+    overflowColor = HS_TEXT_COLOR,
+    fontFamily = HS_FONT_FAMILY
+  } = opts;
+  const size = resolveSize(sizeProp);
+  let step;
+  if (stepProp != null) {
+    step = stepProp;
+  } else if (overlapProp != null) {
+    const clampedOverlap = Math.max(0, Math.min(size - 1, overlapProp));
+    step = size - clampedOverlap;
+  } else {
+    step = Math.round(size * 0.65);
+  }
+  const entries = (rawEntries || []).map(normalizeEntry).filter(Boolean);
+  if (entries.length === 0) return null;
+  const visible = entries.slice(0, maxVisible);
+  const overflowCount = entries.length - visible.length;
+  const slots = overflowCount > 0 ? [...entries.slice(0, maxVisible - 1), { overflow: overflowCount }] : visible;
+  const count = slots.length;
+  const r = size / 2;
+  const haloR = r + 1;
+  const width = size + (count - 1) * step;
+  const height = size;
+  const defs = `<defs><clipPath id="hsuixAvatarClip"><circle cx="${r}" cy="${r}" r="${r}"/></clipPath></defs>`;
+  const fontFamilyAttr = fontFamily.replace(/"/g, "&quot;");
+  const pieces = slots.map((slot, i) => {
+    const cx = r + i * step;
+    const tx = i * step;
+    const halo = i > 0 ? `<circle cx="${cx}" cy="${r}" r="${haloR}" fill="#ffffff" />` : "";
+    if (slot.overflow) {
+      return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${overflowBg}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.42)}" font-weight="700" fill="${overflowColor}">+${slot.overflow}</text>`;
+    }
+    if (slot.src) {
+      return halo + `<g transform="translate(${tx}, 0)"><image href="${escapeXmlAttr(slot.src)}" x="0" y="0" width="${size}" height="${size}" preserveAspectRatio="xMidYMid slice" clip-path="url(#hsuixAvatarClip)" /></g>`;
+    }
+    const letter = slot.letter || "?";
+    const bgColor = slot.color || pickColor(letter, colors, i);
+    return halo + `<circle cx="${cx}" cy="${r}" r="${r}" fill="${bgColor}" /><text x="${cx}" y="${r + 1}" text-anchor="middle" dominant-baseline="central" font-family="${fontFamilyAttr}" font-size="${Math.round(size * 0.46)}" font-weight="700" fill="#ffffff">${escapeXmlAttr(letter)}</text>`;
+  });
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="${width}" height="${height}">` + defs + pieces.join("") + `</svg>`;
+  return {
+    src: `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`,
+    width,
+    height,
+    count
+  };
+};
+var AvatarStack = ({
+  items,
+  size,
+  overlap,
+  step,
+  maxVisible,
+  colors,
+  overflowBg,
+  overflowColor,
+  fontFamily,
+  alt
+}) => {
+  const stack = makeAvatarStackDataUri(items, {
+    size,
+    overlap,
+    step,
+    maxVisible,
+    colors,
+    overflowBg,
+    overflowColor,
+    fontFamily
+  });
+  if (!stack) return null;
+  return React.createElement(Image, {
+    src: stack.src,
+    width: stack.width,
+    height: stack.height,
+    alt: alt ?? `${items.length} associated records`
+  });
+};
+
+// packages/feed/src/Feed.jsx
+var DEFAULT_LABELS = {
+  search: "Search activity...",
+  sort: "Sort",
+  all: "All",
+  clearAll: "Clear all",
+  dateFrom: "From",
+  dateTo: "To",
+  loading: "Loading feed...",
+  loadingMessage: "This should only take a moment.",
+  loadingMore: "Loading...",
+  loadMore: "View more",
+  collapseAll: "Collapse all",
+  expandAll: "Expand all",
+  emptyTitle: "No activity yet",
+  emptyMessage: "New activity will appear here.",
+  errorTitle: "Something went wrong.",
+  errorMessage: "An error occurred while loading the feed.",
+  itemCount: (shown, total, label) => shown === total ? `${total} ${label}` : `${shown} of ${total} ${label}`,
+  allItems: "All"
+};
+var DEFAULT_RECORD_LABEL = { singular: "item", plural: "items" };
+var DEFAULT_SEARCH_FIELDS = ["title", "subject", "body", "description", "content", "preview", "type", "typeLabel", "actorName", "author"];
+var DEFAULT_PAGE_SIZE = 5;
+var hasValue = (value) => value != null && value !== false && value !== "";
+var getItemKey = (item, index, getKey) => {
+  if (typeof getKey === "function") return getKey(item, index);
+  return (item == null ? void 0 : item.id) ?? (item == null ? void 0 : item.key) ?? `feed-item-${index}`;
+};
+var getValue = (item, field) => {
+  if (typeof field === "function") return field(item);
+  if (typeof field === "string") return item == null ? void 0 : item[field];
+  return void 0;
+};
+var normalizeText = (value) => String(value ?? "").toLowerCase();
+var pickTimestamp = (item) => (item == null ? void 0 : item.timestamp) ?? (item == null ? void 0 : item.time) ?? (item == null ? void 0 : item.date) ?? (item == null ? void 0 : item.createdAt) ?? (item == null ? void 0 : item.dateLabel);
+var pickActor = (item) => (item == null ? void 0 : item.actor) ?? (item == null ? void 0 : item.actorName) ?? (item == null ? void 0 : item.author);
+var pickActorName = (actor) => {
+  if (!actor || typeof actor !== "object") return actor;
+  return actor.name ?? actor.label ?? actor.email;
+};
+var pickActorAvatar = (actor) => {
+  if (!actor || typeof actor !== "object") return null;
+  return actor.avatar ?? actor.avatarUrl ?? actor.src ?? actor.initials ?? actor.name;
+};
+var pickBody = (item) => (item == null ? void 0 : item.body) ?? (item == null ? void 0 : item.description) ?? (item == null ? void 0 : item.content) ?? (item == null ? void 0 : item.preview) ?? (item == null ? void 0 : item.notePreview);
+var pickHeaderActions = (item) => item == null ? void 0 : item.headerActions;
+var itemHasExpandableContent = (item, fields) => {
+  if ((item == null ? void 0 : item.collapsible) === false) return false;
+  if ((item == null ? void 0 : item.collapsible) === true) return true;
+  if (hasValue(pickBody(item))) return true;
+  if (hasValue(pickActor(item))) return true;
+  if (hasValue(item == null ? void 0 : item.actions)) return true;
+  if (hasValue(item == null ? void 0 : item.footer)) return true;
+  if (hasValue(item == null ? void 0 : item.meta) || hasValue(item == null ? void 0 : item.metadata)) return true;
+  if (Array.isArray(fields)) {
+    if (fields.some((f) => ["body", "footer"].includes(f.placement ?? "body"))) return true;
+  }
+  return false;
+};
+var pickMeta = (item) => (item == null ? void 0 : item.meta) ?? (item == null ? void 0 : item.metadata);
+var pickType = (item) => (item == null ? void 0 : item.typeLabel) ?? (item == null ? void 0 : item.type);
+var pickStatus = (item) => (item == null ? void 0 : item.statusLabel) ?? (item == null ? void 0 : item.status) ?? (item == null ? void 0 : item.outcome) ?? (item == null ? void 0 : item.severity);
+var pickStatusVariant = (item) => (item == null ? void 0 : item.statusVariant) ?? (item == null ? void 0 : item.outcomeVariant) ?? (item == null ? void 0 : item.severityVariant) ?? "default";
+var toDate = (value) => {
+  if (!value) return null;
+  if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+  if (typeof value === "object" && value.year != null && value.month != null && value.date != null) {
+    return new Date(value.year, value.month, value.date);
+  }
+  const parsed = new Date(value);
+  return Number.isNaN(parsed.getTime()) ? null : parsed;
+};
+var compareValues = (a, b) => {
+  const aDate = toDate(a);
+  const bDate = toDate(b);
+  if (aDate && bDate) return aDate.getTime() - bDate.getTime();
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  return String(a ?? "").localeCompare(String(b ?? ""));
+};
+var formatDateGroup = (value) => {
+  if (!value) return "No date";
+  const date = toDate(value);
+  if (!date) return String(value);
+  const today = /* @__PURE__ */ new Date();
+  const yesterday = /* @__PURE__ */ new Date();
+  yesterday.setDate(today.getDate() - 1);
+  const sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+  if (sameDay(date, today)) return "Today";
+  if (sameDay(date, yesterday)) return "Yesterday";
+  return date.toLocaleDateString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() === today.getFullYear() ? void 0 : "numeric"
+  });
+};
+var formatTimestamp = (value) => {
+  if (!value) return value;
+  const date = toDate(value);
+  if (!date) return value;
+  return date.toLocaleString(void 0, {
+    month: "short",
+    day: "numeric",
+    year: date.getFullYear() === (/* @__PURE__ */ new Date()).getFullYear() ? void 0 : "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  });
+};
+var renderMaybe = (renderer, item, index) => {
+  if (typeof renderer !== "function") return null;
+  return renderer(item, index);
+};
+var isEmptyFilterValue = (value) => {
+  if (value == null || value === "" || value === "all") return true;
+  if (Array.isArray(value)) return value.length === 0;
+  if (typeof value === "object") return !value.from && !value.to;
+  return false;
+};
+var getFilterValue = (filterValues, filter) => {
+  if (!filterValues) return filter.defaultValue;
+  const value = filterValues[filter.name];
+  return value === void 0 ? filter.defaultValue : value;
+};
+var getRecordLabel = (recordLabel, count) => {
+  const label = { ...DEFAULT_RECORD_LABEL, ...recordLabel || {} };
+  return count === 1 ? label.singular : label.plural;
+};
+var FeedIcon = ({ name, size = "sm" }) => {
+  if (!name) return null;
+  return /* @__PURE__ */ React2.createElement(Icon, { name, size, purpose: "decorative" });
+};
+var FeedActorAvatar = ({ item, avatarSize }) => {
+  const actor = pickActor(item);
+  const avatar = (item == null ? void 0 : item.avatar) ?? pickActorAvatar(actor);
+  if (!hasValue(avatar)) return null;
+  return /* @__PURE__ */ React2.createElement(
+    AvatarStack,
+    {
+      items: [avatar],
+      size: item.avatarSize ?? avatarSize,
+      maxVisible: 1,
+      alt: item.avatarAlt ?? pickActorName(actor) ?? item.title ?? "Feed item avatar"
+    }
+  );
+};
+var FeedTypeIcon = ({ item, iconSize }) => {
+  if (hasValue(item == null ? void 0 : item.icon) && typeof item.icon !== "string") return item.icon;
+  const iconName = typeof (item == null ? void 0 : item.icon) === "string" ? item.icon : item == null ? void 0 : item.iconName;
+  if (!hasValue(iconName)) return null;
+  return /* @__PURE__ */ React2.createElement(Icon, { name: iconName, size: iconSize, purpose: "decorative" });
+};
+var FeedActions = ({ actions }) => {
+  if (!Array.isArray(actions) || actions.length === 0) return actions || null;
+  return /* @__PURE__ */ React2.createElement(ButtonRow, { dropDownButtonOptions: { text: "More", size: "small", variant: "transparent" } }, actions.filter(Boolean).slice(0, 3).map((action, index) => /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      key: action.key ?? action.label ?? `action-${index}`,
+      size: action.size ?? "small",
+      variant: action.variant ?? "transparent",
+      disabled: action.disabled,
+      href: action.href,
+      onClick: action.onClick
+    },
+    action.icon ? /* @__PURE__ */ React2.createElement(Icon, { name: action.icon, size: action.iconSize ?? "sm", purpose: "decorative" }) : null,
+    action.label
+  )));
+};
+var FeedField = ({ field, item, index }) => {
+  if (!field) return null;
+  if (field.visible && !field.visible(item)) return null;
+  const value = getValue(item, field.field);
+  const rendered = field.render ? field.render(value, item, index) : value;
+  if (!hasValue(rendered)) return null;
+  if (field.href) {
+    const href = typeof field.href === "function" ? field.href(item) : field.href;
+    return /* @__PURE__ */ React2.createElement(Link, { href }, rendered);
+  }
+  if (field.type === "status") {
+    const variant = typeof field.variant === "function" ? field.variant(value, item) : field.variant;
+    return /* @__PURE__ */ React2.createElement(StatusTag, { variant: variant ?? "default" }, rendered);
+  }
+  if (field.type === "tag") {
+    const variant = typeof field.variant === "function" ? field.variant(value, item) : field.variant;
+    return /* @__PURE__ */ React2.createElement(Tag, { variant: variant ?? "default" }, rendered);
+  }
+  if (field.label) {
+    return /* @__PURE__ */ React2.createElement(DescriptionListItem, { label: field.label }, rendered);
+  }
+  return rendered;
+};
+var fieldsForPlacement = (fields, placement) => Array.isArray(fields) ? fields.filter((field) => (field.placement ?? "body") === placement) : [];
+var renderPlacedFields = ({ fields, placement, item, index, inline = false }) => {
+  const placed = fieldsForPlacement(fields, placement);
+  if (placed.length === 0) return null;
+  const nodes = placed.map((field, fieldIndex) => /* @__PURE__ */ React2.createElement(
+    FeedField,
+    {
+      key: field.key ?? field.field ?? `${placement}-${fieldIndex}`,
+      field,
+      item,
+      index
+    }
+  )).filter(Boolean);
+  if (nodes.length === 0) return null;
+  if (inline) return /* @__PURE__ */ React2.createElement(Inline, { gap: "xs", align: "center" }, nodes);
+  if (placed.some((field) => field.label)) return /* @__PURE__ */ React2.createElement(DescriptionList, { direction: "row" }, nodes);
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, nodes);
+};
+var renderHeaderActions = (headerActions) => {
+  if (!hasValue(headerActions)) return null;
+  if (!Array.isArray(headerActions)) return headerActions;
+  return /* @__PURE__ */ React2.createElement(Inline, { gap: "sm", align: "center" }, headerActions.filter(Boolean).map((action, index) => /* @__PURE__ */ React2.createElement(
+    Link,
+    {
+      key: action.key ?? action.label ?? `header-action-${index}`,
+      href: action.href,
+      onClick: action.onClick
+    },
+    action.label
+  )));
+};
+var DefaultFeedItem = ({
+  item,
+  index,
+  fields,
+  compact,
+  avatarSize,
+  iconSize,
+  collapsible,
+  expanded,
+  onToggleExpanded,
+  renderActor,
+  renderTimestamp,
+  renderMeta,
+  renderActions,
+  renderFooter
+}) => {
+  const rawActor = pickActor(item);
+  const actor = renderMaybe(renderActor, item, index) ?? pickActorName(rawActor);
+  const timestamp = renderMaybe(renderTimestamp, item, index) ?? pickTimestamp(item);
+  const meta = renderMaybe(renderMeta, item, index) ?? pickMeta(item);
+  const type = pickType(item);
+  const status = pickStatus(item);
+  const statusVariant = pickStatusVariant(item);
+  const actions = renderMaybe(renderActions, item, index) ?? (item == null ? void 0 : item.actions);
+  const headerActions = pickHeaderActions(item);
+  const footer = renderMaybe(renderFooter, item, index) ?? (item == null ? void 0 : item.footer);
+  const body = pickBody(item);
+  const avatar = /* @__PURE__ */ React2.createElement(FeedActorAvatar, { item, avatarSize });
+  const typeIcon = /* @__PURE__ */ React2.createElement(FeedTypeIcon, { item, iconSize });
+  const hasAvatarNode = hasValue(item == null ? void 0 : item.avatar) || hasValue(pickActorAvatar(rawActor));
+  const titleFields = fieldsForPlacement(fields, "title");
+  const titleField = titleFields.length > 0 ? /* @__PURE__ */ React2.createElement(FeedField, { field: titleFields[0], item, index }) : null;
+  const subtitleFields = renderPlacedFields({ fields, placement: "subtitle", item, index, inline: true });
+  const metaFields = renderPlacedFields({ fields, placement: "meta", item, index, inline: true });
+  const bodyFields = renderPlacedFields({ fields, placement: "body", item, index });
+  const footerFields = renderPlacedFields({ fields, placement: "footer", item, index, inline: true });
+  const titleContent = titleField ?? (item == null ? void 0 : item.title) ?? (item == null ? void 0 : item.subject);
+  const title = hasValue(item == null ? void 0 : item.href) ? /* @__PURE__ */ React2.createElement(Link, { href: item.href }, titleContent) : titleContent;
+  const headerLeft = /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "nowrap" }, collapsible ? /* @__PURE__ */ React2.createElement(Link, { onClick: onToggleExpanded }, /* @__PURE__ */ React2.createElement(Icon, { name: expanded ? "downCarat" : "right", size: "sm", purpose: "decorative" })) : null, typeIcon, hasValue(title) && /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" }, truncate: true }, title));
+  const headerRight = hasValue(headerActions) || hasValue(timestamp) || hasValue(type) ? /* @__PURE__ */ React2.createElement(Inline, { gap: "sm", align: "center" }, renderHeaderActions(headerActions), hasValue(type) && /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, type), hasValue(timestamp) && /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, formatTimestamp(timestamp))) : null;
+  const showBody = !collapsible || expanded;
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: compact ? "xs" : "sm" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", justify: "between", align: "center", gap: "sm", wrap: "nowrap" }, /* @__PURE__ */ React2.createElement(Box, { flex: 1 }, headerLeft), headerRight), showBody ? /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: compact ? "xs" : "sm" }, (hasAvatarNode || hasValue(actor) || hasValue(subtitleFields) || hasValue(status)) && /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "xs", wrap: "wrap" }, hasAvatarNode ? avatar : null, hasValue(actor) && /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, actor), subtitleFields, hasValue(status) && /* @__PURE__ */ React2.createElement(StatusTag, { variant: statusVariant, hollow: true }, status)), hasValue(body) && /* @__PURE__ */ React2.createElement(Text, null, body), bodyFields, Array.isArray(meta) ? meta.length > 0 ? /* @__PURE__ */ React2.createElement(List, { variant: "inline-divided" }, meta) : metaFields : hasValue(meta) ? /* @__PURE__ */ React2.createElement(Inline, { gap: "xs" }, meta) : metaFields ? metaFields : null, hasValue(actions) && /* @__PURE__ */ React2.createElement(FeedActions, { actions }), (hasValue(footer) || hasValue(footerFields)) && /* @__PURE__ */ React2.createElement(Inline, { gap: "xs", align: "center" }, footerFields, footer)) : null);
+};
+var applyTab = (items, activeTab, tabField) => {
+  if (!activeTab || activeTab === "all") return items;
+  return items.filter((item) => String(getValue(item, tabField)) === String(activeTab));
+};
+var normalizeTabs = (tabs, items, tabField, labels) => {
+  if (Array.isArray(tabs) && tabs.length > 0) return tabs;
+  const values = [];
+  items.forEach((item) => {
+    const value = getValue(item, tabField);
+    if (value != null && value !== "" && !values.some((v) => String(v) === String(value))) values.push(value);
+  });
+  return [
+    { label: labels.allItems, value: "all" },
+    ...values.map((value) => ({ label: String(value), value }))
+  ];
+};
+var applySearch = (items, search, searchFields) => {
+  const term = normalizeText(search).trim();
+  if (!term) return items;
+  const fields = Array.isArray(searchFields) && searchFields.length > 0 ? searchFields : DEFAULT_SEARCH_FIELDS;
+  return items.filter((item) => fields.some((field) => {
+    const value = field === "actor" || field === "author" ? pickActorName(getValue(item, field)) : getValue(item, field);
+    return normalizeText(value).includes(term);
+  }));
+};
+var applyFilters = (items, filters, filterValues) => {
+  if (!Array.isArray(filters) || filters.length === 0) return items;
+  return items.filter((item) => filters.every((filter) => {
+    const value = getFilterValue(filterValues, filter);
+    if (isEmptyFilterValue(value)) return true;
+    if (typeof filter.filterFn === "function") return filter.filterFn(item, value);
+    const itemValue = getValue(item, filter.field ?? filter.name);
+    if (filter.type === "multiselect") {
+      const selected = Array.isArray(value) ? value : [value];
+      return selected.map(String).includes(String(itemValue));
+    }
+    if (filter.type === "dateRange") {
+      const itemDate = toDate(itemValue);
+      if (!itemDate) return false;
+      const from = toDate(value.from);
+      const to = toDate(value.to);
+      if (from && itemDate < from) return false;
+      if (to && itemDate > to) return false;
+      return true;
+    }
+    return String(itemValue) === String(value);
+  }));
+};
+var applySort = (items, sortValue, sortOptions) => {
+  if (!sortValue || !Array.isArray(sortOptions) || sortOptions.length === 0) return items;
+  const option = sortOptions.find((opt) => opt.value === sortValue);
+  if (!option) return items;
+  const sorted = [...items];
+  sorted.sort((a, b) => {
+    if (typeof option.comparator === "function") return option.comparator(a, b);
+    const direction = option.direction === "desc" || option.direction === "descending" ? -1 : 1;
+    return compareValues(getValue(a, option.field), getValue(b, option.field)) * direction;
+  });
+  return sorted;
+};
+var buildGroups = ({ items, groupBy, groupByDate, getGroupLabel }) => {
+  if (!groupBy && !groupByDate) return [{ key: "__all__", label: null, items }];
+  const groups = [];
+  const groupMap = /* @__PURE__ */ new Map();
+  items.forEach((item) => {
+    const rawKey = groupByDate ? formatDateGroup(pickTimestamp(item)) : getValue(item, groupBy);
+    const key = rawKey == null ? "__empty__" : String(rawKey);
+    const label = typeof getGroupLabel === "function" ? getGroupLabel(rawKey, item) : key === "__empty__" ? "Other" : key;
+    if (!groupMap.has(key)) {
+      const group = { key, label, items: [] };
+      groupMap.set(key, group);
+      groups.push(group);
+    }
+    groupMap.get(key).items.push(item);
+  });
+  return groups;
+};
+var FeedToolbar = ({
+  labels,
+  search,
+  onSearch,
+  showSearch,
+  searchPlaceholder,
+  filters,
+  filterValues,
+  onFilter,
+  filterInlineLimit,
+  sortOptions,
+  sort,
+  onSort,
+  showItemCount,
+  itemCountLabel
+}) => {
+  const [showMoreFilters, setShowMoreFilters] = useState(false);
+  const inlineFilters = (filters || []).slice(0, filterInlineLimit);
+  const overflowFilters = (filters || []).slice(filterInlineLimit);
+  const renderFilterControl = (filter) => {
+    const value = getFilterValue(filterValues, filter);
+    if (filter.type === "multiselect") {
+      return /* @__PURE__ */ React2.createElement(
+        MultiSelect,
+        {
+          key: filter.name,
+          name: `feed-filter-${filter.name}`,
+          label: "",
+          placeholder: filter.placeholder || filter.label || labels.all,
+          value: Array.isArray(value) ? value : [],
+          options: filter.options || [],
+          onChange: (next) => onFilter(filter.name, next)
+        }
+      );
+    }
+    if (filter.type === "dateRange") {
+      return /* @__PURE__ */ React2.createElement(Flex, { key: filter.name, direction: "row", align: "center", gap: "xs" }, /* @__PURE__ */ React2.createElement(
+        DateInput,
+        {
+          label: "",
+          placeholder: filter.fromLabel ?? labels.dateFrom,
+          name: `feed-filter-${filter.name}-from`,
+          format: "medium",
+          value: (value == null ? void 0 : value.from) ?? null,
+          onChange: (next) => onFilter(filter.name, { ...value || {}, from: next })
+        }
+      ), /* @__PURE__ */ React2.createElement(FeedIcon, { name: "dataSync", size: "sm" }), /* @__PURE__ */ React2.createElement(
+        DateInput,
+        {
+          label: "",
+          placeholder: filter.toLabel ?? labels.dateTo,
+          name: `feed-filter-${filter.name}-to`,
+          format: "medium",
+          value: (value == null ? void 0 : value.to) ?? null,
+          onChange: (next) => onFilter(filter.name, { ...value || {}, to: next })
+        }
+      ));
+    }
+    const options = filter.includeAll === false ? filter.options || [] : [{ label: filter.allLabel ?? filter.placeholder ?? filter.label ?? labels.all, value: "all" }, ...filter.options || []];
+    return /* @__PURE__ */ React2.createElement(
+      Select,
+      {
+        key: filter.name,
+        name: `feed-filter-${filter.name}`,
+        variant: "transparent",
+        placeholder: filter.placeholder || filter.label || labels.all,
+        value: value ?? "all",
+        options,
+        onChange: (next) => onFilter(filter.name, next)
+      }
+    );
+  };
+  const hasLeftControls = showSearch || inlineFilters.length > 0 || overflowFilters.length > 0;
+  const hasRightControls = Array.isArray(sortOptions) && sortOptions.length > 0 || showItemCount;
+  if (!hasLeftControls && !hasRightControls) return null;
+  return /* @__PURE__ */ React2.createElement(Flex, { direction: "row", gap: "sm" }, /* @__PURE__ */ React2.createElement(Box, { flex: 3 }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "sm" }, hasLeftControls ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, showSearch ? /* @__PURE__ */ React2.createElement(
+    SearchInput,
+    {
+      name: "feed-search",
+      placeholder: searchPlaceholder ?? labels.search,
+      value: search,
+      clearable: true,
+      onChange: onSearch
+    }
+  ) : null, inlineFilters.map(renderFilterControl), overflowFilters.length > 0 ? /* @__PURE__ */ React2.createElement(
+    Button,
+    {
+      variant: "transparent",
+      size: "sm",
+      onClick: () => setShowMoreFilters((prev) => !prev)
+    },
+    /* @__PURE__ */ React2.createElement(Icon, { name: "filter", size: "sm", purpose: "decorative" }),
+    "Filters"
+  ) : null) : null, showMoreFilters && overflowFilters.length > 0 ? /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", wrap: "wrap" }, overflowFilters.map(renderFilterControl)) : null)), hasRightControls ? /* @__PURE__ */ React2.createElement(Box, { flex: 1, alignSelf: "start" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "row", align: "center", gap: "sm", justify: "end", wrap: "wrap" }, Array.isArray(sortOptions) && sortOptions.length > 0 ? /* @__PURE__ */ React2.createElement(
+    Select,
+    {
+      name: "feed-sort",
+      value: sort ?? "",
+      variant: "transparent",
+      placeholder: labels.sort,
+      options: [{ label: labels.sort, value: "" }, ...sortOptions.map((opt) => ({ label: opt.label, value: opt.value }))],
+      onChange: onSort
+    }
+  ) : null, showItemCount ? /* @__PURE__ */ React2.createElement(Text, { variant: "microcopy" }, itemCountLabel) : null)) : null);
+};
+var Feed = ({
+  items = [],
+  fields,
+  title,
+  description,
+  actions,
+  children,
+  loading = false,
+  error = null,
+  labels: labelOverrides,
+  renderItem,
+  renderActor,
+  renderTimestamp,
+  renderMeta,
+  renderActions,
+  renderFooter,
+  renderToolbar,
+  renderEmptyState,
+  renderLoadingState,
+  renderErrorState,
+  getKey,
+  groupBy,
+  groupByDate = false,
+  getGroupLabel,
+  bordered = true,
+  container = bordered ? "tile" : "none",
+  showDividers = true,
+  itemContainer = "tile",
+  compact = false,
+  gap = "sm",
+  avatarSize = "small",
+  iconSize = "sm",
+  tabs,
+  showTabs,
+  tabField = "type",
+  tabVariant = "default",
+  tabValue,
+  defaultTab = "all",
+  onTabChange,
+  searchFields = DEFAULT_SEARCH_FIELDS,
+  showSearch,
+  searchPlaceholder,
+  searchValue,
+  onSearchChange,
+  filters = [],
+  filterValues,
+  defaultFilterValues = {},
+  onFilterChange,
+  sortOptions = [],
+  sort,
+  defaultSort = null,
+  onSortChange,
+  onParamsChange,
+  serverSide = false,
+  showToolbar = true,
+  showItemCount = true,
+  itemCountText,
+  recordLabel,
+  filterInlineLimit = 1,
+  pageSize = DEFAULT_PAGE_SIZE,
+  initialItemCount,
+  maxItems,
+  hasMore = false,
+  loadingMore = false,
+  onLoadMore,
+  collapsible = "auto",
+  defaultCollapsed = "none",
+  collapsedIds,
+  onCollapsedIdsChange,
+  showCollapseToggle = true
+}) => {
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides || {} };
+  const safeItems = Array.isArray(items) ? items : [];
+  const [internalTab, setInternalTab] = useState(tabValue ?? defaultTab ?? "all");
+  const [internalSearch, setInternalSearch] = useState(searchValue ?? "");
+  const [internalFilters, setInternalFilters] = useState(filterValues ?? defaultFilterValues);
+  const [internalSort, setInternalSort] = useState(sort ?? defaultSort ?? null);
+  const [visibleCount, setVisibleCount] = useState(initialItemCount ?? pageSize);
+  const computeInitialCollapsed = () => {
+    if (Array.isArray(collapsedIds)) return collapsedIds;
+    if (Array.isArray(defaultCollapsed)) return defaultCollapsed;
+    if (defaultCollapsed === "all") return safeItems.map((item, idx) => getItemKey(item, idx, getKey));
+    return [];
+  };
+  const [internalCollapsedIds, setInternalCollapsedIds] = useState(computeInitialCollapsed);
+  const activeTab = tabValue !== void 0 ? tabValue : internalTab;
+  const activeSearch = searchValue !== void 0 ? searchValue : internalSearch;
+  const activeFilters = filterValues !== void 0 ? filterValues : internalFilters;
+  const activeSort = sort !== void 0 ? sort : internalSort;
+  const activeCollapsedIds = Array.isArray(collapsedIds) ? collapsedIds : internalCollapsedIds;
+  const resolvedShowSearch = showSearch ?? (Array.isArray(searchFields) && searchFields.length > 0);
+  const resolvedMaxItems = maxItems ?? visibleCount;
+  useEffect(() => {
+    if (tabValue !== void 0) setInternalTab(tabValue);
+  }, [tabValue]);
+  useEffect(() => {
+    if (searchValue !== void 0) setInternalSearch(searchValue);
+  }, [searchValue]);
+  useEffect(() => {
+    if (filterValues !== void 0) setInternalFilters(filterValues);
+  }, [filterValues]);
+  useEffect(() => {
+    if (sort !== void 0) setInternalSort(sort);
+  }, [sort]);
+  useEffect(() => {
+    if (Array.isArray(collapsedIds)) setInternalCollapsedIds(collapsedIds);
+  }, [collapsedIds]);
+  const emitParamsChange = (next) => {
+    if (typeof onParamsChange === "function") {
+      onParamsChange({ tab: activeTab, search: activeSearch, filters: activeFilters, sort: activeSort, ...next });
+    }
+  };
+  const handleTabChange = (next) => {
+    if (tabValue === void 0) setInternalTab(next);
+    setVisibleCount(initialItemCount ?? pageSize);
+    onTabChange == null ? void 0 : onTabChange(next);
+    emitParamsChange({ tab: next });
+  };
+  const handleSearchChange = (next) => {
+    if (searchValue === void 0) setInternalSearch(next);
+    setVisibleCount(initialItemCount ?? pageSize);
+    onSearchChange == null ? void 0 : onSearchChange(next);
+    emitParamsChange({ search: next });
+  };
+  const handleFilterChange = (name, value) => {
+    const nextFilters = { ...activeFilters || {}, [name]: value };
+    if (filterValues === void 0) setInternalFilters(nextFilters);
+    setVisibleCount(initialItemCount ?? pageSize);
+    onFilterChange == null ? void 0 : onFilterChange(nextFilters);
+    emitParamsChange({ filters: nextFilters });
+  };
+  const handleSortChange = (next) => {
+    const nextSort = next || null;
+    if (sort === void 0) setInternalSort(nextSort);
+    setVisibleCount(initialItemCount ?? pageSize);
+    onSortChange == null ? void 0 : onSortChange(nextSort);
+    emitParamsChange({ sort: nextSort });
+  };
+  const setCollapsedIds = (next) => {
+    if (collapsedIds === void 0) setInternalCollapsedIds(next);
+    onCollapsedIdsChange == null ? void 0 : onCollapsedIdsChange(next);
+  };
+  const toggleItemExpanded = (key) => {
+    const isCollapsed = activeCollapsedIds.includes(key);
+    setCollapsedIds(isCollapsed ? activeCollapsedIds.filter((id) => id !== key) : [...activeCollapsedIds, key]);
+  };
+  const handleCollapseAll = () => {
+    const collapsibleKeys = visibleItems.map((item, idx) => ({ item, idx })).filter(({ item }) => itemHasExpandableContent(item, fields)).map(({ item, idx }) => getItemKey(item, idx, getKey));
+    setCollapsedIds(collapsibleKeys);
+  };
+  const handleExpandAll = () => setCollapsedIds([]);
+  const processedItems = useMemo(() => {
+    if (serverSide) return safeItems;
+    const tabbed = applyTab(safeItems, activeTab, tabField);
+    const searched = applySearch(tabbed, activeSearch, searchFields);
+    const filtered = applyFilters(searched, filters, activeFilters);
+    return applySort(filtered, activeSort, sortOptions);
+  }, [safeItems, activeTab, tabField, activeSearch, searchFields, filters, activeFilters, activeSort, sortOptions, serverSide]);
+  const visibleItems = useMemo(
+    () => processedItems.slice(0, Math.max(0, resolvedMaxItems)),
+    [processedItems, resolvedMaxItems]
+  );
+  const groups = useMemo(
+    () => buildGroups({ items: visibleItems, groupBy, groupByDate, getGroupLabel }),
+    [visibleItems, groupBy, groupByDate, getGroupLabel]
+  );
+  const totalCount = processedItems.length;
+  const itemCountLabel = typeof itemCountText === "function" ? itemCountText(visibleItems.length, totalCount) : labels.itemCount(visibleItems.length, totalCount, getRecordLabel(recordLabel, totalCount));
+  const canViewMore = visibleItems.length < processedItems.length;
+  const shouldShowExternalLoadMore = hasMore && onLoadMore;
+  const normalizedTabs = useMemo(
+    () => normalizeTabs(tabs, safeItems, tabField, labels),
+    [tabs, safeItems, tabField, labels]
+  );
+  const resolvedShowTabs = showTabs ?? normalizedTabs.length > 1;
+  const toolbarNode = renderToolbar ? renderToolbar({
+    tab: activeTab,
+    tabs: normalizedTabs,
+    search: activeSearch,
+    filters: activeFilters,
+    sort: activeSort,
+    totalCount,
+    visibleCount: visibleItems.length,
+    onTabChange: handleTabChange,
+    onSearchChange: handleSearchChange,
+    onFilterChange: handleFilterChange,
+    onSortChange: handleSortChange
+  }) : showToolbar && !loading && !error ? /* @__PURE__ */ React2.createElement(
+    FeedToolbar,
+    {
+      labels,
+      search: activeSearch,
+      onSearch: handleSearchChange,
+      showSearch: resolvedShowSearch,
+      searchPlaceholder,
+      filters,
+      filterValues: activeFilters,
+      onFilter: handleFilterChange,
+      filterInlineLimit,
+      sortOptions,
+      sort: activeSort,
+      onSort: handleSortChange,
+      showItemCount,
+      itemCountLabel
+    }
+  ) : null;
+  const content = [];
+  const collapsibleVisibleItems = visibleItems.filter((item) => itemHasExpandableContent(item, fields));
+  const allCollapsed = collapsibleVisibleItems.length > 0 && collapsibleVisibleItems.every((item, idx) => {
+    const i = visibleItems.indexOf(item);
+    return activeCollapsedIds.includes(getItemKey(item, i >= 0 ? i : idx, getKey));
+  });
+  const collapseToggle = showCollapseToggle && collapsibleVisibleItems.length > 1 && !loading && !error ? /* @__PURE__ */ React2.createElement(Link, { onClick: allCollapsed ? handleExpandAll : handleCollapseAll }, allCollapsed ? labels.expandAll : labels.collapseAll) : null;
+  if (hasValue(title) || hasValue(description) || hasValue(actions) || hasValue(children) || collapseToggle) {
+    const headerBody = /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: "xs" }, hasValue(title) && /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, title), hasValue(description) && /* @__PURE__ */ React2.createElement(Text, null, description), children);
+    const headerRight = hasValue(actions) || collapseToggle ? /* @__PURE__ */ React2.createElement(Inline, { gap: "sm", align: "center" }, actions, collapseToggle) : null;
+    content.push(
+      /* @__PURE__ */ React2.createElement(Flex, { key: "header", direction: "row", justify: "between", align: "start", gap: "sm" }, headerBody, headerRight)
+    );
+  }
+  const bodyContent = [];
+  if (toolbarNode) bodyContent.push(/* @__PURE__ */ React2.createElement(React2.Fragment, { key: "toolbar" }, toolbarNode));
+  if (loading) {
+    bodyContent.push(
+      renderLoadingState ? renderLoadingState({ label: labels.loading }) : (
+        // Same EmptyState layout as the empty state (just the "building" image +
+        // a loading message) so loading and empty match with no layout shift.
+        /* @__PURE__ */ React2.createElement(Tile, { key: "loading" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.loading, imageName: "building", layout: "vertical" }, /* @__PURE__ */ React2.createElement(Text, null, labels.loadingMessage))))
+      )
+    );
+  } else if (error) {
+    bodyContent.push(
+      renderErrorState ? renderErrorState({
+        error,
+        title: typeof error === "string" ? error : labels.errorTitle,
+        message: labels.errorMessage
+      }) : /* @__PURE__ */ React2.createElement(Alert, { key: "error", variant: "danger", title: typeof error === "string" ? error : labels.errorTitle }, /* @__PURE__ */ React2.createElement(Text, null, labels.errorMessage))
+    );
+  } else if (processedItems.length === 0) {
+    bodyContent.push(
+      renderEmptyState ? renderEmptyState({ title: labels.emptyTitle, message: labels.emptyMessage }) : /* @__PURE__ */ React2.createElement(Tile, { key: "empty" }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", align: "center", justify: "center" }, /* @__PURE__ */ React2.createElement(EmptyState, { title: labels.emptyTitle, layout: "vertical" }, /* @__PURE__ */ React2.createElement(Text, null, labels.emptyMessage))))
+    );
+  } else {
+    bodyContent.push(
+      /* @__PURE__ */ React2.createElement(Flex, { key: "items", direction: "column", gap: compact ? "xs" : gap }, groups.map((group) => /* @__PURE__ */ React2.createElement(Flex, { key: group.key, direction: "column", gap: compact ? "xs" : gap }, hasValue(group.label) && /* @__PURE__ */ React2.createElement(Text, { format: { fontWeight: "demibold" } }, group.label), group.items.map((item, index) => {
+        const globalIndex = safeItems.indexOf(item);
+        const itemIndex = globalIndex >= 0 ? globalIndex : index;
+        const key = getItemKey(item, itemIndex, getKey);
+        const node = renderItem ? renderItem(item, itemIndex) : /* @__PURE__ */ React2.createElement(
+          DefaultFeedItem,
+          {
+            item,
+            index: itemIndex,
+            fields,
+            compact,
+            avatarSize,
+            iconSize,
+            collapsible: collapsible !== false && itemHasExpandableContent(item, fields),
+            expanded: !activeCollapsedIds.includes(key),
+            onToggleExpanded: () => toggleItemExpanded(key),
+            renderActor,
+            renderTimestamp,
+            renderMeta,
+            renderActions,
+            renderFooter
+          }
+        );
+        const wrappedNode = itemContainer === "card" || itemContainer === "tile" ? /* @__PURE__ */ React2.createElement(Tile, { compact: true }, node) : node;
+        return /* @__PURE__ */ React2.createElement(React2.Fragment, { key }, wrappedNode, showDividers && itemContainer === "none" && index < group.items.length - 1 && /* @__PURE__ */ React2.createElement(Divider, null));
+      }))))
+    );
+    if (canViewMore || shouldShowExternalLoadMore) {
+      bodyContent.push(
+        /* @__PURE__ */ React2.createElement(Flex, { key: "load-more", direction: "row", justify: "center" }, /* @__PURE__ */ React2.createElement(
+          Button,
+          {
+            onClick: shouldShowExternalLoadMore ? onLoadMore : () => setVisibleCount((count) => count + pageSize),
+            disabled: loadingMore,
+            variant: "transparent",
+            size: "sm"
+          },
+          loadingMore ? labels.loadingMore : labels.loadMore
+        ))
+      );
+    }
+  }
+  if (resolvedShowTabs && !loading && !error) {
+    content.push(
+      /* @__PURE__ */ React2.createElement(
+        Tabs,
+        {
+          key: "tabs",
+          selected: activeTab ?? "all",
+          onSelectedChange: handleTabChange,
+          variant: tabVariant
+        },
+        normalizedTabs.map((tab) => /* @__PURE__ */ React2.createElement(Tab, { key: tab.value, tabId: tab.value, title: String(tab.label), disabled: tab.disabled, tooltip: tab.tooltip }, /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: compact ? "xs" : gap }, String(tab.value) === String(activeTab ?? "all") ? bodyContent : null)))
+      )
+    );
+  } else {
+    content.push(...bodyContent);
+  }
+  const feed = /* @__PURE__ */ React2.createElement(Flex, { direction: "column", gap: compact ? "xs" : gap }, content);
+  if (container === "card" || container === "tile") return /* @__PURE__ */ React2.createElement(Tile, { compact: true }, feed);
+  return feed;
+};
+export {
+  Feed
+};