@onekeyfe/react-native-native-list 6.7.0-alpha.375 → 6.7.0-alpha.382

package/src/web/templates/ActivityRowRenderer.ts

@@ -47,6 +47,7 @@ function bindLegacy(
   }
   const visualKey = JSON.stringify([
     row.key,
+    row.hideLeading,
     row.leading,
     row.secondaryLeading,
   ]);
@@ -55,7 +56,7 @@ function bindLegacy(
       primitives.dispose(node);
       node.remove();
     });
-    v.visuals = [row.leading, row.secondaryLeading]
+    v.visuals = (row.hideLeading ? [] : [row.leading, row.secondaryLeading])
       .map((source) => primitives.visual(source))
       .filter((node): node is HTMLElement => !!node);
     v.visuals.forEach((node) => body.insertBefore(node, v.column));
@@ -389,11 +390,12 @@ function bindHistory(
   Object.assign(v.identity.style, {
     display: 'flex',
     alignItems: 'center',
-    gap: '12px',
+    gap: row.hideLeading ? '0' : '12px',
     minWidth: '0',
     flex: '1 1 0',
   });
   Object.assign(v.visual.style, {
+    display: row.hideLeading ? 'none' : '',
     position: 'relative',
     width: '40px',
     height: '40px',
@@ -401,6 +403,7 @@ function bindHistory(
   });
   const visualKey = JSON.stringify([
     row.key,
+    row.hideLeading,
     row.leading,
     row.secondaryLeading,
   ]);
@@ -410,7 +413,9 @@ function bindHistory(
     );
     v.visual.replaceChildren();
     v.visuals = [];
-    const sources = [row.leading, row.secondaryLeading].filter(Boolean);
+    const sources = row.hideLeading
+      ? []
+      : [row.leading, row.secondaryLeading].filter(Boolean);
     sources.forEach((source) => {
       const visual = primitives.visual(source);
       if (!visual) return;
@@ -439,7 +444,9 @@ function bindHistory(
     });
     v.visualKey = visualKey;
   }
-  const sources = [row.leading, row.secondaryLeading].filter(Boolean);
+  const sources = row.hideLeading
+    ? []
+    : [row.leading, row.secondaryLeading].filter(Boolean);
   v.visuals.forEach((retained, index) => {
     const { node: visual, style, background, loaded } = retained;
     const source = sources[index];
@@ -773,8 +780,9 @@ function bindHistory(
     20,
     400
   );
-  v.actions.style.cssText =
-    'display:flex;gap:12px;padding-left:52px;padding-bottom:4px;';
+  v.actions.style.cssText = `display:flex;gap:12px;padding-left:${
+    row.hideLeading ? 0 : 52
+  }px;padding-bottom:4px;`;
   v.actions.style.display = footer ? 'flex' : 'none';
   const actionKeys = new Set<string>();
   for (const [index, action] of (row.footerActions ?? []).entries()) {

package/src/web/templates/ButtonGroupRowRenderer.ts

@@ -0,0 +1,58 @@
+import type { ButtonGroupRow } from '../../models';
+import { markActionAnchorSource } from './RowElements';
+import type { RowPrimitives } from './RowVisual';
+
+function bind(body: HTMLElement, row: ButtonGroupRow) {
+  body.replaceChildren();
+  body.className = 'ok-native-list-row ok-native-list-button-group';
+  body.removeAttribute('data-nl-container-background');
+  body.removeAttribute('data-nl-container-border');
+  row.buttons.forEach((descriptor, index) => {
+    const button = body.ownerDocument.createElement('button');
+    button.type = 'button';
+    button.className = 'ok-native-list-block-button';
+    button.dataset.nativeListAction = descriptor.actionKey;
+    button.dataset.nlButtonKey = descriptor.key;
+    button.dataset.nlSlot = `button-${index}`;
+    if (descriptor.testID) button.dataset.testid = descriptor.testID;
+    button.setAttribute(
+      'aria-label',
+      descriptor.accessibilityLabel ?? descriptor.label
+    );
+    button.disabled = Boolean(
+      row.disabled || descriptor.disabled || descriptor.loading
+    );
+    button.setAttribute('aria-busy', descriptor.loading ? 'true' : 'false');
+    markActionAnchorSource(button, 'buttonGroup', index);
+    const label = body.ownerDocument.createElement('span');
+    label.textContent = descriptor.label;
+    if (descriptor.loading) {
+      const spinner = body.ownerDocument.createElement('span');
+      spinner.className = 'ok-native-list-spinner';
+      spinner.setAttribute('role', 'progressbar');
+      button.appendChild(spinner);
+    }
+    button.appendChild(label);
+    body.appendChild(button);
+  });
+}
+
+function create(
+  document: Document,
+  row: ButtonGroupRow,
+  _primitives: RowPrimitives
+) {
+  const body = document.createElement('div');
+  body.dataset.nlRenderer = 'buttonGroup';
+  bind(body, row);
+  return body;
+}
+
+export const buttonGroupRowRenderer = {
+  key: 'buttonGroup' as const,
+  create,
+  bind,
+  recycle: (body: HTMLElement) => body.replaceChildren(),
+  measure: (_row: ButtonGroupRow, _width: number) => 64,
+  measureRendered: (body: HTMLElement) => body.scrollHeight,
+};

package/src/web/templates/DataRowRenderer.ts

@@ -1,10 +1,17 @@
 import type { DataRow, TextTone } from '../../models';
-import { createElement, tagSlot } from './RowElements';
+import {
+  createElement,
+  markActionAnchorSource,
+  setData,
+  tagSlot,
+} from './RowElements';
+import { applyValueSegments, fontWeight } from './RowText';
 import { RowVisualStyle, type RowPrimitives } from './RowVisual';
 type ColumnViews = {
   body: HTMLElement;
   primaryLine: HTMLElement;
   primary: HTMLElement;
+  titleIcons: HTMLElement;
   badges: HTMLElement;
   secondaryLine: HTMLElement;
   secondary: HTMLElement[];
@@ -13,6 +20,7 @@ type Views = {
   favorite: HTMLElement;
   index: HTMLElement;
   controls: HTMLElement;
+  trailing: HTMLElement;
   columns: ColumnViews[];
   visual?: HTMLElement;
   visualStyle?: RowVisualStyle;
@@ -43,6 +51,11 @@ function bind(body: HTMLElement, row: DataRow, primitives: RowPrimitives) {
   if (row.checkbox)
     v.controls.appendChild(primitives.accessory(row.key, row.checkbox, 0));
   v.controls.style.display = 'contents';
+  v.trailing.replaceChildren();
+  row.trailing?.forEach((accessory, index) =>
+    v.trailing.appendChild(primitives.accessory(row.key, accessory, index))
+  );
+  v.trailing.hidden = !row.trailing?.length;
   v.index.style.cssText = '';
   v.index.hidden = row.index === undefined;
   v.index.textContent = String(row.index ?? '');
@@ -88,7 +101,41 @@ function bind(body: HTMLElement, row: DataRow, primitives: RowPrimitives) {
       cell.primaryLine.style.gap = `${style.titleBadgeGap}px`;
     cell.primary.style.cssText = '';
     cell.primary.textContent = column.text;
+    applyValueSegments(
+      cell.primary,
+      column.textSegments,
+      style?.columns?.fontSize ?? 14,
+      style?.columns?.lineHeight ?? 20,
+      fontWeight(style?.columns?.fontWeight, 500)
+    );
     if (style?.columns) primitives.textStyle(cell.primary, style.columns);
+    cell.titleIcons.replaceChildren();
+    if (column.titleIcon || column.secondaryTitleIcon) {
+      cell.primary.style.minWidth = '0';
+      cell.primary.style.overflow = 'hidden';
+      cell.primary.style.textOverflow = 'ellipsis';
+      cell.primary.style.whiteSpace = 'nowrap';
+      [column.titleIcon, column.secondaryTitleIcon]
+        .filter((icon): icon is NonNullable<typeof icon> => icon !== undefined)
+        .forEach((descriptor) => {
+          const icon = primitives.iconAction(
+            descriptor.name,
+            undefined,
+            undefined,
+            descriptor.tintColor
+          );
+          icon.className = 'ok-native-list-identity-title-icon';
+          if (descriptor.hoverActionKey) {
+            setData(icon, 'nativeListHoverAction', descriptor.hoverActionKey);
+            setData(icon, 'nativeListIconHelp', true);
+            markActionAnchorSource(icon, 'leadingAction');
+          }
+          if (descriptor.accessibilityLabel)
+            icon.setAttribute('aria-label', descriptor.accessibilityLabel);
+          else icon.setAttribute('aria-hidden', 'true');
+          cell.titleIcons.appendChild(icon);
+        });
+    }
     cell.badges.replaceChildren();
     cell.badges.style.display = 'contents';
     if (column.key === 'asset')
@@ -107,25 +154,34 @@ function bind(body: HTMLElement, row: DataRow, primitives: RowPrimitives) {
       });
     // Legacy Web layout: secondary leading text sits inline before the primary
     // text; secondary text is a direct line below it, toned by secondaryTone.
-    cell.secondaryLine.style.display = column.secondaryText
-      ? 'contents'
-      : 'none';
-    [column.secondaryLeadingText, column.secondaryText].forEach(
-      (text, slot) => {
-        const label = cell.secondary[slot]!;
-        label.hidden = !text;
-        if (!text) label.remove();
-        else if (slot === 0) cell.primaryLine.insertBefore(label, cell.primary);
-        else cell.secondaryLine.appendChild(label);
-        label.style.cssText = '';
-        label.textContent = text ?? '';
-        if (slot === 1)
-          label.style.color = tone(column.secondaryTone, 'secondary');
-        if (style?.columnSecondary)
-          primitives.textStyle(label, style.columnSecondary);
+    const secondaryText = column.secondaryTextSegments?.length
+      ? column.secondaryTextSegments.map((segment) => segment.text).join('')
+      : column.secondaryText;
+    cell.secondaryLine.style.display = secondaryText ? 'contents' : 'none';
+    [column.secondaryLeadingText, secondaryText].forEach((text, slot) => {
+      const label = cell.secondary[slot]!;
+      label.hidden = !text;
+      if (!text) label.remove();
+      else if (slot === 0) cell.primaryLine.insertBefore(label, cell.primary);
+      else cell.secondaryLine.appendChild(label);
+      label.style.cssText = '';
+      label.textContent = text ?? '';
+      if (slot === 1) {
+        applyValueSegments(
+          label,
+          column.secondaryTextSegments,
+          style?.columnSecondary?.fontSize ?? 12,
+          style?.columnSecondary?.lineHeight ?? 16,
+          fontWeight(style?.columnSecondary?.fontWeight, 400)
+        );
       }
-    );
+      if (slot === 1)
+        label.style.color = tone(column.secondaryTone, 'secondary');
+      if (style?.columnSecondary)
+        primitives.textStyle(label, style.columnSecondary);
+    });
   });
+  body.appendChild(v.trailing);
 }
 function create(document: Document, row: DataRow, primitives: RowPrimitives) {
   const body = createElement(
@@ -140,6 +196,11 @@ function create(document: Document, row: DataRow, primitives: RowPrimitives) {
   );
   const favorite = createElement(document, 'span', 'ok-native-list-favorite');
   const controls = createElement(document, 'span');
+  const trailing = createElement(
+    document,
+    'span',
+    'ok-native-list-accessories'
+  );
   body.append(controls, index, favorite);
   const columns = Array.from({ length: 4 }, () => {
     const cell = createElement(document, 'span', 'ok-native-list-data-cell');
@@ -149,8 +210,10 @@ function create(document: Document, row: DataRow, primitives: RowPrimitives) {
       'ok-native-list-data-primary'
     );
     const primary = tagSlot(createElement(document, 'span'), 'columns');
+    const titleIcons = createElement(document, 'span');
+    titleIcons.style.display = 'contents';
     const badges = createElement(document, 'span');
-    primaryLine.append(primary, badges);
+    primaryLine.append(primary, titleIcons, badges);
     const secondaryLine = createElement(
       document,
       'span',
@@ -169,15 +232,18 @@ function create(document: Document, row: DataRow, primitives: RowPrimitives) {
       body: cell,
       primaryLine,
       primary,
+      titleIcons,
       badges,
       secondaryLine,
       secondary,
     };
   });
+  body.appendChild(trailing);
   views.set(body, {
     favorite,
     index,
     controls,
+    trailing,
     columns,
     visualKey: '',
     primitives,
@@ -196,6 +262,7 @@ function recycle(body: HTMLElement) {
   v.visualStyle = undefined;
   v.visualKey = '';
   v.controls.replaceChildren();
+  v.trailing.replaceChildren();
 }
 export const dataRowRenderer = {
   key: 'dataRow' as const,
@@ -204,7 +271,13 @@ export const dataRowRenderer = {
   recycle,
   // Legacy presets: table rows without secondary text are 8 units shorter.
   measure: (row: DataRow, _width: number, layout?: string) => {
-    const secondary = row.columns.some((column) => column.secondaryText);
+    const secondary = row.columns.some((column) =>
+      column.secondaryTextSegments?.length
+        ? column.secondaryTextSegments.some(
+            (segment) => segment.text.length > 0
+          )
+        : !!column.secondaryText
+    );
     return (secondary ? 60 : 56) + (layout === 'table' && !secondary ? -8 : 0);
   },
   measureRendered: (_body: HTMLElement, _row: DataRow): number | undefined =>

package/src/web/templates/IdentityRowRenderer.ts

@@ -226,6 +226,117 @@ function createIdentityRow(
       });
       column.insertBefore(segments, titleElement.nextSibling);
     }
+    if (row.titleIcon || row.secondaryTitleIcon) {
+      const badgeLine = titleElement.querySelector<HTMLElement>(
+        ':scope > .ok-native-list-badges'
+      );
+      const titleText = createElement(
+        document,
+        'span',
+        'ok-native-list-identity-title-text'
+      );
+      while (titleElement.firstChild && titleElement.firstChild !== badgeLine)
+        titleText.appendChild(titleElement.firstChild);
+      titleElement.prepend(titleText);
+      const icons = [row.titleIcon, row.secondaryTitleIcon]
+        .filter((icon): icon is NonNullable<typeof icon> => icon !== undefined)
+        .map((descriptor) => {
+          const icon = primitives.iconAction(
+            descriptor.name,
+            undefined,
+            undefined,
+            descriptor.tintColor
+          );
+          icon.className = 'ok-native-list-identity-title-icon';
+          if (descriptor.hoverActionKey) {
+            setData(icon, 'nativeListHoverAction', descriptor.hoverActionKey);
+            setData(icon, 'nativeListIconHelp', true);
+            markActionAnchorSource(icon, 'leadingAction');
+          }
+          if (descriptor.accessibilityLabel)
+            icon.setAttribute('aria-label', descriptor.accessibilityLabel);
+          else icon.setAttribute('aria-hidden', 'true');
+          return icon;
+        });
+      titleText.after(...icons);
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      titleElement.style.gap = '4px';
+    }
+    if (row.titleSuffixes?.length) {
+      const badges = titleElement.querySelector(
+        ':scope > .ok-native-list-badges'
+      );
+      let titleText = titleElement.querySelector<HTMLElement>(
+        ':scope > .ok-native-list-identity-title-text, :scope > [data-nl-slot="title"]'
+      );
+      if (!titleText) {
+        titleText = tagSlot(
+          createElement(document, 'span', 'ok-native-list-identity-title-text'),
+          'title'
+        );
+        while (titleElement.firstChild && titleElement.firstChild !== badges)
+          titleText.appendChild(titleElement.firstChild);
+        titleElement.prepend(titleText);
+        titleElement.removeAttribute('data-nl-slot');
+      } else if (titleElement.hasAttribute('data-nl-slot')) {
+        titleElement.removeAttribute('data-nl-slot');
+        tagSlot(titleText, 'title');
+      }
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      titleText.style.flex = '0 1 auto';
+      titleText.style.minWidth = 'min(80px, 100%)';
+      titleText.style.overflow = 'hidden';
+      titleText.style.textOverflow = 'ellipsis';
+      titleText.style.whiteSpace = 'nowrap';
+      row.titleSuffixes.forEach((suffix) => {
+        const label = createElement(
+          document,
+          'span',
+          'ok-native-list-identity-title-suffix',
+          suffix.text
+        );
+        label.style.flex = '0 1 auto';
+        label.style.minWidth = '0';
+        label.style.marginInlineStart =
+          row.titleIcon || row.secondaryTitleIcon ? '4px' : '8px';
+        label.style.maxWidth =
+          suffix.maxWidth === undefined ? '' : `${suffix.maxWidth}px`;
+        label.style.overflow = 'hidden';
+        label.style.textOverflow = 'ellipsis';
+        label.style.whiteSpace = 'nowrap';
+        label.style.fontSize = '12px';
+        label.style.lineHeight = '16px';
+        label.style.fontWeight = '400';
+        label.style.fontFamily = 'var(--nl-font-regular)';
+        label.style.color =
+          suffix.tone === 'disabled'
+            ? 'var(--nl-disabled)'
+            : 'var(--nl-secondary)';
+        titleElement.insertBefore(label, badges);
+      });
+    }
+    if (row.badges?.length && !row.titleIcon && !row.secondaryTitleIcon) {
+      const titleText = titleElement.querySelector<HTMLElement>(
+        ':scope > [data-nl-slot="title"]'
+      );
+      const badges = titleElement.querySelector<HTMLElement>(
+        ':scope > .ok-native-list-badges'
+      );
+      titleElement.style.display = 'flex';
+      titleElement.style.alignItems = 'center';
+      if (titleText) {
+        titleText.style.flex = '0 1 auto';
+        titleText.style.minWidth = row.titleSuffixes?.length
+          ? 'min(80px, 100%)'
+          : '0';
+      }
+      if (badges) {
+        badges.style.flex = '0 1 auto';
+        badges.style.minWidth = '0';
+      }
+    }
     if (presentation === 'walletSidebar' && row.badges?.length) {
       const badges = createElement(
         document,
@@ -242,7 +353,13 @@ function createIdentityRow(
       if (lines !== undefined)
         column
           .querySelectorAll<HTMLElement>(`[data-nl-slot="${key}"]`)
-          .forEach((text) => applyTextLayout(text, { lines }));
+          .forEach((text) =>
+            applyTextLayout(
+              text,
+              lines === 0 ? {} : { lines },
+              lines === 0 ? 0 : undefined
+            )
+          );
     }
   }
   body.appendChild(column);
@@ -272,6 +389,29 @@ function applyIdentityStyle(body: HTMLElement, row: IdentityRow) {
   const leading = body.querySelector<HTMLElement>(
     ':scope > .ok-native-list-visual, :scope > .ok-native-list-stacked'
   );
+  if (row.style?.leadingContentMaxWidthRatio !== undefined && !vertical) {
+    const column = body.querySelector<HTMLElement>(
+      ':scope > .ok-native-list-flex'
+    );
+    const trailing = body.querySelector<HTMLElement>(
+      ':scope > .ok-native-list-accessories'
+    );
+    const visualWidth = leading
+      ? row.style.image?.width ??
+        (row.presentation === 'accountSelector' ||
+        row.presentation === 'networkSelector'
+          ? 32
+          : 40)
+      : 0;
+    const gap = leading ? row.style.leadingGap ?? 12 : 0;
+    if (column) {
+      column.style.flex = '0 1 auto';
+      column.style.maxWidth = `calc(${
+        row.style.leadingContentMaxWidthRatio * 100
+      }% - ${visualWidth + gap}px)`;
+    }
+    if (trailing) trailing.style.marginInlineStart = 'auto';
+  }
   const defaultGap =
     body.style.gap ||
     (row.type === 'identity' && row.presentation === 'walletSidebar'
@@ -343,7 +483,7 @@ function applyIdentityStyle(body: HTMLElement, row: IdentityRow) {
     const images = leading.matches('img')
       ? [leading]
       : leading.querySelectorAll<HTMLElement>(
-          ':scope > img, :scope > .ok-native-list-visual-fallback'
+          ':scope > img:not(.ok-native-list-visual-corner), :scope > .ok-native-list-visual-fallback:not(.ok-native-list-visual-corner)'
         );
     images.forEach((bitmap) => {
       if (bitmap !== leading) {
@@ -522,7 +662,12 @@ export const identityRowRenderer = {
       ? 60
       : 56,
   measureRendered: (
-    _body: HTMLElement,
-    _row: IdentityRow
-  ): number | undefined => undefined,
+    body: HTMLElement,
+    row: IdentityRow
+  ): number | undefined => {
+    if (row.contentHeight !== 'auto' || hasExplicitRowHeight(row))
+      return undefined;
+    const height = body.getBoundingClientRect().height;
+    return height > 0 ? height : undefined;
+  },
 };

package/src/web/templates/MessageRowRenderer.ts

@@ -4,10 +4,8 @@ import type { MessageRow, NativeListTextStyle } from '../../models';
 
 type Text = Readonly<{
   value: string;
-  style: Required<
-    Pick<NativeListTextStyle, 'fontSize' | 'lineHeight' | 'lines'>
-  > &
-    NativeListTextStyle;
+  style: Required<Pick<NativeListTextStyle, 'fontSize' | 'lineHeight'>> &
+    Omit<NativeListTextStyle, 'lines'> & { lines: 0 | 1 | 2 | 3 };
 }>;
 export function resolveMessageRow(row: MessageRow) {
   const text = (
@@ -15,7 +13,7 @@ export function resolveMessageRow(row: MessageRow) {
     style: NativeListTextStyle | undefined,
     fontSize: number,
     lineHeight: number,
-    lines: 1 | 2 | 3,
+    lines: 0 | 1 | 2 | 3,
     color: string,
     fontWeight: NativeListTextStyle['fontWeight'] = 'regular'
   ): Text => ({
@@ -117,6 +115,9 @@ export function bindMessageRow(
   body.style.cssText = '';
   body.removeAttribute('data-nl-container-background');
   body.removeAttribute('data-nl-container-border');
+  if (row.presentation === 'inlineWarning')
+    body.setAttribute('data-nl-inline-warning', 'true');
+  else body.removeAttribute('data-nl-inline-warning');
   body.style.padding = `${resolved.verticalPadding}px ${resolved.horizontalPadding}px`;
   body.style.height = resolved.automaticHeight ? 'auto' : '100%';
   views.column.style.cssText = '';
@@ -128,7 +129,19 @@ export function bindMessageRow(
   ] as const) {
     view.style.cssText = '';
     view.textContent = text.value;
-    primitives.textStyle(view, text.style);
+    const { lines, ...textStyle } = text.style;
+    primitives.textStyle(
+      view,
+      lines === 0 ? textStyle : { ...textStyle, lines }
+    );
+    if (lines === 0) {
+      view.style.whiteSpace = 'pre-wrap';
+      view.style.overflow = 'visible';
+      view.style.textOverflow = 'clip';
+      view.style.maxHeight = 'none';
+      view.style.removeProperty('-webkit-line-clamp');
+      view.style.removeProperty('-webkit-box-orient');
+    }
   }
   views.unread.style.cssText = '';
   if (row.body) {
@@ -258,7 +271,10 @@ export function measureMessageRow(
           ),
         0
       );
-    return Math.min(text.style.lines, lines) * text.style.lineHeight;
+    return (
+      (text.style.lines === 0 ? lines : Math.min(text.style.lines, lines)) *
+      text.style.lineHeight
+    );
   };
   const timeWidth = Math.min(
     availableWidth / 3,

package/src/web/templates/RowContainerStyle.ts

@@ -88,6 +88,8 @@ export function applyRowContainerStyle(body: HTMLElement, row: RowModel): void {
   }
   if (container.cornerRadius !== undefined)
     set(body, 'border-radius', `${container.cornerRadius}px`);
+  if (row.type === 'message' && row.presentation === 'inlineWarning')
+    set(body, 'border-radius', '0px');
   if (container.borderWidth !== undefined) {
     // Paint above member backgrounds without changing the content box or hit targets.
     body.setAttribute('data-nl-container-border', 'true');

package/src/web/templates/RowRendererRegistry.ts

@@ -16,8 +16,15 @@ import type { SystemRow } from '../../models';
 import { systemRowRenderer } from './SystemRowRenderer';
 import type { ActionRow } from '../../models';
 import { actionRowRenderer } from './ActionRowRenderer';
+import { buttonGroupRowRenderer } from './ButtonGroupRowRenderer';
 import { mediaTileRowRenderer } from './MediaTileRowRenderer';
-import type { MessageRow, RailRow, MediaTileRow, RowModel } from '../../models';
+import type {
+  ButtonGroupRow,
+  MessageRow,
+  RailRow,
+  MediaTileRow,
+  RowModel,
+} from '../../models';
 import { messageRowRenderer } from './MessageRowRenderer';
 import type { RowPrimitives } from './RowVisual';
 import { railRowRenderer } from './RailRowRenderer';
@@ -71,6 +78,8 @@ const factories = {
     registration(activityRowRenderer, row as ActivityRow),
   system: (row: RowModel) => registration(systemRowRenderer, row as SystemRow),
   action: (row: RowModel) => registration(actionRowRenderer, row as ActionRow),
+  buttonGroup: (row: RowModel) =>
+    registration(buttonGroupRowRenderer, row as ButtonGroupRow),
   message: (row: RowModel) =>
     registration(messageRowRenderer, row as MessageRow),
   rail: (row: RowModel) => registration(railRowRenderer, row as RailRow),
@@ -91,6 +100,7 @@ const renderers = {
   activity: activityRowRenderer,
   system: systemRowRenderer,
   action: actionRowRenderer,
+  buttonGroup: buttonGroupRowRenderer,
   message: messageRowRenderer,
   rail: railRowRenderer,
   mediaTile: mediaTileRowRenderer,