qantler-flaz-dataview 1.0.0

package/src/FlazDataViewList.jsx

@@ -0,0 +1,787 @@
+import React, { useState, useMemo, useCallback, useEffect } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import Tooltip from "@mui/material/Tooltip";
+import { resolveTone, STATUS_STYLES } from "../../ui/TableStatusCell";
+import { renderColumnIcon, renderColumnDefIcon } from "../../ui/tableColumnIcons";
+import MdtRowActionsMenu from "./MdtRowActionsMenu";
+import {
+  getColumnRowIconName,
+  getMultiSelectDisplayLabels,
+  renderListColumnChip,
+  shouldUseMultiSelectSummary,
+} from "./mdtMultiSelectDisplay";
+import MdtEmptyState from "./MdtEmptyState";
+import { getColumnTooltipText } from "./mdtTooltipFormat";
+import "./FlazDataView.css";
+
+const COLUMN_GROUP_ICON_COLOR = "oklch(0.5288 0.0083 230.88)";
+const GROUP_HEAD_ICON_SIZE = 14;
+
+const getListSecondaryLabel = (row, _columns, keys, separator = " - ") =>
+  keys
+    .map((key) => {
+      const val = row[key];
+      if (val == null || String(val).trim() === "") return null;
+      return String(val);
+    })
+    .filter(Boolean)
+    .join(separator);
+
+const getTooltipValue = (row, col) => {
+  if (shouldUseMultiSelectSummary(col)) {
+    const labels = getMultiSelectDisplayLabels(row, col);
+    if (labels.length > 1) return "";
+    if (labels.length === 1) return labels[0];
+    return "None";
+  }
+  const text = getColumnTooltipText(col, row);
+  return text || "None";
+};
+
+const getListMetaColumns = (columns, listLeftColumnKeys) => {
+  const leftKeySet = new Set(listLeftColumnKeys);
+  return columns.filter(
+    (col) =>
+      col.accessorKey !== "action" &&
+      col.header !== "Actions" &&
+      !leftKeySet.has(col.accessorKey),
+  );
+};
+
+/** Skeleton row — same DOM/classes as renderRow so loaders align with real data. */
+const renderListSkeletonRow = (
+  key,
+  {
+    columns,
+    listLeftColumnKeys,
+    listMainColumnKey,
+    listLeftSecondaryKeys,
+    showRowSelect,
+    showRowMenu = false,
+    announce = false,
+  },
+) => {
+  const metaCols = getListMetaColumns(columns, listLeftColumnKeys);
+  const secondaryKeys =
+    listLeftSecondaryKeys != null
+      ? listLeftSecondaryKeys
+      : listLeftColumnKeys.filter((k) => k !== listMainColumnKey);
+  const showSecondary = secondaryKeys.length > 0;
+
+  return (
+    <div
+      className={[
+        "mdt-group-row",
+        "mdt-group-row-skeleton",
+        showRowSelect ? "mdt-group-row-with-select" : "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+      key={key}
+      role={announce ? "status" : undefined}
+      aria-live={announce ? "polite" : undefined}
+      aria-hidden={announce ? undefined : true}
+    >
+      {showRowSelect ? <div className="mdt-cell-select-slot" aria-hidden /> : null}
+      <div className="mdt-col-main">
+        <div className="mdt-col-main-text">
+          <span className="mdt-title">
+            <span className="mdt-skeleton-cell mdt-skeleton-main" aria-hidden />
+          </span>
+          {showSecondary ? (
+            <span className="mdt-list-secondary">
+              <span
+                className="mdt-skeleton-cell mdt-skeleton-secondary"
+                aria-hidden
+              />
+            </span>
+          ) : null}
+        </div>
+      </div>
+      <div className="mdt-col-meta-wrap">
+        <div className="mdt-col-meta">
+          {metaCols.map((col) => (
+            <span
+              key={col.accessorKey}
+              className="mdt-chip mdt-chip-skeleton"
+              aria-hidden
+            >
+              <span className="mdt-skeleton-cell mdt-skeleton-chip" aria-hidden />
+            </span>
+          ))}
+        </div>
+        {showRowMenu ? (
+          <span className="mdt-list-row-actions" aria-hidden>
+            <span className="mdt-skeleton-cell mdt-skeleton-row-menu" aria-hidden />
+          </span>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+/**
+ * groupByKey: column accessor to group by, or null for a flat list (all rows, no section headers).
+ */
+const FlazDataViewList = ({
+  wrapRef = null,
+  rows,
+  columns,
+  onRowClick,
+  isLoading,
+  isLoadingMore = false,
+  emptyStateTitle = "No data found",
+  skeletonRows = 5,
+  onListScroll = null,
+  groupByKey = null,
+  title = "",
+  /** Flat list group header prefix (e.g. Active, Closed, All). Defaults to All. */
+  listGroupHeadPrefix = "All",
+  /** Flat list group header count; defaults to loaded row count. */
+  listGroupHeadCount = null,
+  suppressListRowCountFallback = false,
+  rowKey = "applicationId",
+  /** Primary field on the left (e.g. applicationId). */
+  listMainColumnKey = "applicationId",
+  /**
+   * Column keys pinned to the left (includes main + any shown in the secondary line).
+   * Other rendered columns appear as chips on the right.
+   */
+  listLeftColumnKeys = ["applicationId", "jobOpeningName", "candidateName"],
+  /**
+   * Keys combined into the secondary line after the main ID (subset of listLeftColumnKeys).
+   * Omit or pass [] for no secondary line. Defaults to listLeftColumnKeys minus listMainColumnKey.
+   */
+  listLeftSecondaryKeys = null,
+  /** How secondary values are joined, e.g. " - " → "Job A - Jane Doe". */
+  listLeftSecondarySeparator = " - ",
+  onRowEdit,
+  onRowDownload,
+  onRowDelete,
+  rowMenuActions = [],
+  deleteConfirmConfig = {},
+  isRowDeletable = null,
+  selectedRowIds = null,
+  onToggleRowSelection,
+  onToggleGroupSelection,
+  hasSelection = false,
+  /** Same inline edit as table view — only columns with `editable: true`. */
+  onCellActivate = null,
+  isColumnEditable = null,
+  cellEdit = null,
+  cellEditAnchorRef = null,
+}) => {
+  const [collapsedGroups, setCollapsedGroups] = useState({});
+  const [openRowMenuKey, setOpenRowMenuKey] = useState(null);
+  const [openRowMenuRow, setOpenRowMenuRow] = useState(null);
+  const [rowMenuPosition, setRowMenuPosition] = useState(null);
+
+  const showRowMenu = Boolean(
+    onRowEdit || onRowDownload || onRowDelete || rowMenuActions.length > 0,
+  );
+  const showRowSelect = Boolean(selectedRowIds && onToggleRowSelection);
+  const flatGroupKey = "__all__";
+  const [localSkeletonRows, setLocalSkeletonRows] = useState(skeletonRows);
+
+  useEffect(() => {
+    setLocalSkeletonRows(skeletonRows);
+  }, [skeletonRows]);
+
+  useEffect(() => {
+    if (!isLoading) return undefined;
+    const update = () => {
+      const h = wrapRef?.current?.clientHeight || 0;
+      if (!h) return;
+      const fit = Math.ceil(Math.max(h - 48, 0) / 48);
+      setLocalSkeletonRows(Math.max(skeletonRows, fit));
+    };
+    update();
+    window.addEventListener("resize", update);
+    const el = wrapRef?.current;
+    let ro;
+    if (el) {
+      ro = new ResizeObserver(update);
+      ro.observe(el);
+    }
+    return () => {
+      window.removeEventListener("resize", update);
+      ro?.disconnect();
+    };
+  }, [isLoading, skeletonRows, wrapRef]);
+
+  const getRowId = useCallback(
+    (row, idx) => {
+      const id = row[rowKey] ?? row.id ?? row.applicationId;
+      return id != null && id !== "" ? id : idx;
+    },
+    [rowKey],
+  );
+
+  const closeRowMenu = useCallback(() => {
+    setOpenRowMenuKey(null);
+    setOpenRowMenuRow(null);
+    setRowMenuPosition(null);
+  }, []);
+
+  const handleOpenRowMenu = useCallback((rowId, row, position) => {
+    setOpenRowMenuKey(rowId);
+    setOpenRowMenuRow(row);
+    setRowMenuPosition(position);
+  }, []);
+
+  const groupByColumn = useMemo(
+    () => (groupByKey ? columns.find((c) => c.accessorKey === groupByKey) : null),
+    [columns, groupByKey],
+  );
+
+  const isStatusGroupColumn =
+    groupByKey === "statusName" || groupByColumn?.headerIcon === "status";
+
+  const renderGroupHeadIcon = (groupLabel, { isAllHeader = false } = {}) => {
+    if (isAllHeader) {
+      const iconName =
+        columns.find((c) => c.accessorKey === "applicationId")?.headerIcon ||
+        columns[0]?.headerIcon ||
+        "id";
+      return (
+        <span className="mdt-group-head-icon-wrap">
+          {renderColumnIcon(iconName, {
+            className: "mdt-group-head-icon",
+            size: GROUP_HEAD_ICON_SIZE,
+            color: COLUMN_GROUP_ICON_COLOR,
+          })}
+        </span>
+      );
+    }
+
+    if (isStatusGroupColumn) {
+      if (typeof groupByColumn?.filterRenderIcon === "function") {
+        return (
+          <span className="mdt-group-head-icon-wrap">
+            {groupByColumn.filterRenderIcon(groupLabel)}
+          </span>
+        );
+      }
+      const tone = resolveTone(groupLabel);
+      const { Icon, color } = STATUS_STYLES[tone] || STATUS_STYLES.neutral;
+      return (
+        <Icon
+          size={GROUP_HEAD_ICON_SIZE}
+          color={color}
+          strokeWidth={2.5}
+          className="mdt-group-head-icon"
+        />
+      );
+    }
+
+    const iconName = groupByColumn?.headerIcon || groupByColumn?.rowIcon || "id";
+    return (
+      <span className="mdt-group-head-icon-wrap">
+        {renderColumnIcon(iconName, {
+          className: "mdt-group-head-icon",
+          size: GROUP_HEAD_ICON_SIZE,
+          color: COLUMN_GROUP_ICON_COLOR,
+        })}
+      </span>
+    );
+  };
+
+  const toggleGroup = (title) => {
+    setCollapsedGroups((prev) => ({
+      ...prev,
+      [title]: !prev[title],
+    }));
+  };
+
+  const rowCanDelete = useCallback(
+    (row) => (typeof isRowDeletable === "function" ? isRowDeletable(row) : true),
+    [isRowDeletable],
+  );
+
+  const getGroupRowIds = useCallback(
+    (groupRows) =>
+      groupRows
+        .map((row, idx) => {
+          const id = getRowId(row, idx);
+          return id != null && id !== "" ? String(id) : null;
+        })
+        .filter(Boolean),
+    [getRowId],
+  );
+
+  const renderGroupHead = ({
+    headTitle,
+    headTitleSuffix = null,
+    count,
+    groupKey,
+    groupLabel = headTitle,
+    isAllHeader = false,
+    collapsible = true,
+    groupRows = [],
+  }) => {
+    const groupIds = showRowSelect ? getGroupRowIds(groupRows) : [];
+    const allGroupSelected =
+      groupIds.length > 0 && groupIds.every((id) => selectedRowIds.has(id));
+    const someGroupSelected = groupIds.some((id) => selectedRowIds.has(id));
+    const isCollapsed = Boolean(collapsedGroups[groupKey]);
+
+    return (
+      <div
+        className={[
+          "mdt-group-head",
+          showRowSelect ? "mdt-group-head-with-select" : "",
+          someGroupSelected ? "mdt-group-head-select-active" : "",
+        ]
+          .filter(Boolean)
+          .join(" ")}
+        onClick={collapsible ? () => toggleGroup(groupKey) : undefined}
+        style={{
+          cursor: collapsible ? "pointer" : "default",
+          userSelect: "none",
+          justifyContent: "space-between",
+        }}
+      >
+        {showRowSelect && groupIds.length > 0 && (
+          <div
+            className="mdt-cell-select-slot"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <input
+              type="checkbox"
+              className="mdt-row-select-checkbox mdt-row-select-checkbox--header"
+              checked={allGroupSelected}
+              ref={(el) => {
+                if (el) {
+                  el.indeterminate = someGroupSelected && !allGroupSelected;
+                }
+              }}
+              onChange={(e) => onToggleGroupSelection(groupIds, e)}
+              onClick={(e) => e.stopPropagation()}
+              aria-label={
+                isAllHeader
+                  ? "Select all in list"
+                  : `Select all in ${headTitle}`
+              }
+            />
+          </div>
+        )}
+        <div className="mdt-group-head-left">
+          {renderGroupHeadIcon(groupLabel, { isAllHeader })}
+          <div className="mdt-group-head-labels">
+            {headTitleSuffix ? (
+              <span className="mdt-group-head-title mdt-group-head-title-split">
+                <span className="mdt-group-head-title-prefix">{headTitle}</span>
+                <span className="mdt-group-head-title-suffix">
+                  {headTitleSuffix.toLowerCase()}
+                </span>
+              </span>
+            ) : (
+              <span className="mdt-group-head-title">{headTitle}</span>
+            )}
+            <span className="mdt-group-count">{count}</span>
+          </div>
+        </div>
+        {collapsible && (
+          <button
+            type="button"
+            className="mdt-group-head-toggle"
+            aria-expanded={!isCollapsed}
+            aria-label={isCollapsed ? "Show group" : "Hide group"}
+            title={isCollapsed ? "Show" : "Hide"}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleGroup(groupKey);
+            }}
+          >
+            {isCollapsed ? (
+              <ChevronDown size={16} aria-hidden />
+            ) : (
+              <ChevronUp size={16} aria-hidden />
+            )}
+          </button>
+        )}
+      </div>
+    );
+  };
+
+  const getGroupTitle = useCallback((row, key, col) => {
+    const raw = row[key];
+    if (raw == null) return "Other";
+    if (Array.isArray(raw)) {
+      if (raw.length === 0) return "Other";
+      const labels = getMultiSelectDisplayLabels(row, col);
+      if (labels.length > 0) {
+        return labels.join(", ");
+      }
+      return "Other";
+    }
+    return String(raw).trim() !== "" ? String(raw).trim() : "Other";
+  }, []);
+
+  const groupedRows = useMemo(() => {
+    if (!groupByKey) return null;
+    const groups = {};
+    rows.forEach((row) => {
+      const title = getGroupTitle(row, groupByKey, groupByColumn);
+      if (!groups[title]) groups[title] = [];
+      groups[title].push(row);
+    });
+    return Object.entries(groups).map(([title, items]) => ({
+      title,
+      rows: items,
+    }));
+  }, [rows, groupByKey, groupByColumn, getGroupTitle]);
+
+  const renderRow = useCallback(
+    (row, idx) => {
+      const id = getRowId(row, idx);
+      const leftKeySet = new Set(listLeftColumnKeys);
+      const mainCol =
+        columns.find((c) => c.accessorKey === listMainColumnKey) ?? {
+          accessorKey: listMainColumnKey,
+          header: listMainColumnKey,
+        };
+      const secondaryKeys =
+        listLeftSecondaryKeys != null
+          ? listLeftSecondaryKeys
+          : listLeftColumnKeys.filter((key) => key !== listMainColumnKey);
+      const secondaryLabel = getListSecondaryLabel(
+        row,
+        columns,
+        secondaryKeys,
+        listLeftSecondarySeparator,
+      );
+      const mainCellContent = mainCol?.Cell
+        ? mainCol.Cell({ row: { original: row } })
+        : row[mainCol?.accessorKey];
+      const mainRowIconName = mainCol
+        ? getColumnRowIconName(mainCol, {
+          hasCustomCell: typeof mainCol.Cell === "function",
+        })
+        : null;
+      const mainRowIcon = mainRowIconName
+        ? renderColumnIcon(mainRowIconName, { className: "mdt-row-icon", size: 14 })
+        : null;
+      const metaCols = columns.filter(
+        (col) =>
+          col.accessorKey !== "action" &&
+          col.header !== "Actions" &&
+          !leftKeySet.has(col.accessorKey),
+      );
+
+      const selected = showRowSelect && selectedRowIds.has(String(id));
+      const rowDeletable = rowCanDelete(row);
+
+      return (
+        <div
+          className={[
+            "mdt-group-row",
+            showRowSelect ? "mdt-group-row-with-select" : "",
+            onRowClick ? "mdt-row-clickable" : "",
+            selected ? "mdt-row-selected" : "",
+          ]
+            .filter(Boolean)
+            .join(" ")}
+          key={id}
+          onClick={onRowClick ? () => onRowClick(id) : undefined}
+        >
+          {showRowSelect && (
+            <div
+              className="mdt-cell-select-slot"
+              onClick={(e) => e.stopPropagation()}
+            >
+              <input
+                type="checkbox"
+                className="mdt-row-select-checkbox"
+                checked={selected}
+                onChange={(e) => onToggleRowSelection(String(id), e)}
+                onClick={(e) => e.stopPropagation()}
+                aria-label={`Select row ${id}`}
+              />
+            </div>
+          )}
+          <div className="mdt-col-main">
+            <div className="mdt-col-main-text">
+              {mainCol && (
+                <span className="mdt-title">
+                  {mainRowIcon ? (
+                    <span className="mdt-cell-with-icon">
+                      {mainRowIcon}
+                      <span className="mdt-cell-with-icon-text">{mainCellContent}</span>
+                    </span>
+                  ) : (
+                    mainCellContent
+                  )}
+                </span>
+              )}
+              {secondaryLabel ? (
+                <span className="mdt-list-secondary">{secondaryLabel}</span>
+              ) : null}
+            </div>
+          </div>
+          <div className="mdt-col-meta-wrap">
+            <div className="mdt-col-meta">
+              {metaCols.map((col) => {
+                const isMultiSummary = shouldUseMultiSelectSummary(col);
+                const multiLabels = isMultiSummary
+                  ? getMultiSelectDisplayLabels(row, col)
+                  : [];
+                const tooltipText = getTooltipValue(row, col);
+                const hasTooltip = !!tooltipText;
+                const editable = Boolean(
+                  onCellActivate && isColumnEditable?.(col),
+                );
+                const isCellClickable =
+                  typeof col.onCellClick === "function"
+                  && (typeof col.isCellClickable !== "function"
+                    || col.isCellClickable(row));
+                const isCellClickDisabled =
+                  typeof col.onCellClick === "function" && !isCellClickable;
+                const isEditingCell =
+                  cellEdit?.rowId === String(id)
+                  && cellEdit?.column?.accessorKey === col.accessorKey;
+
+                const chipContent = renderListColumnChip(row, col);
+
+                const chipEl = (
+                  <span
+                    key={col.accessorKey}
+                    className={[
+                      "mdt-chip",
+                      editable ? "mdt-list-chip-edit-anchor" : "",
+                      isCellClickable ? "mdt-list-chip-clickable" : "",
+                      isCellClickDisabled ? "mdt-list-chip-clickable-disabled" : "",
+                      multiLabels.length > 1 ? "mdt-chip-multi-summary" : "",
+                    ]
+                      .filter(Boolean)
+                      .join(" ")}
+                    onClick={
+                      editable
+                        ? (e) => {
+                          e.stopPropagation();
+                          onCellActivate(e, col, row);
+                        }
+                        : isCellClickable
+                          ? (e) => {
+                            e.stopPropagation();
+                            col.onCellClick(row, e);
+                          }
+                          : undefined
+                    }
+                    style={
+                      editable || isCellClickable
+                        ? { cursor: "pointer" }
+                        : isCellClickDisabled
+                          ? { cursor: "not-allowed" }
+                          : undefined
+                    }
+                    ref={isEditingCell ? cellEditAnchorRef : null}
+                  >
+                    {chipContent}
+                  </span>
+                );
+
+                if (!hasTooltip) return chipEl;
+
+                return (
+                  <Tooltip
+                    key={col.accessorKey}
+                    title={
+                      <div style={{ display: "flex", flexDirection: "column", gap: "2px" }}>
+                        <span style={{ fontSize: "11px", fontWeight: "600", color: "#18181b" }}>{col.header}</span>
+                        <span style={{ fontSize: "11px", color: "#71717a" }}>{tooltipText}</span>
+                      </div>
+                    }
+                    arrow
+                    placement="top"
+                    componentsProps={{
+                      tooltip: {
+                        sx: {
+                          bgcolor: '#ffffff',
+                          color: '#18181b',
+                          border: '1px solid #e4e4e7',
+                          borderRadius: 0,
+                          boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+                          padding: '6px 10px',
+                          '& .MuiTooltip-arrow': {
+                            color: '#ffffff',
+                            '&::before': {
+                              border: '1px solid #e4e4e7',
+                              backgroundColor: '#ffffff',
+                            },
+                          },
+                        },
+                      },
+                    }}
+                  >
+                    {chipEl}
+                  </Tooltip>
+                );
+              })}
+            </div>
+            {showRowMenu && (
+                <MdtRowActionsMenu
+                  variant="list"
+                  row={openRowMenuKey === id ? openRowMenuRow ?? row : row}
+                  rowId={id}
+                  isOpen={openRowMenuKey === id}
+                  menuPosition={openRowMenuKey === id ? rowMenuPosition : null}
+                  onOpen={handleOpenRowMenu}
+                  onClose={closeRowMenu}
+                  onRowEdit={onRowEdit}
+                  onRowDownload={onRowDownload}
+                  onRowDelete={onRowDelete}
+                  rowMenuActions={rowMenuActions}
+                  deleteConfirmConfig={deleteConfirmConfig}
+                  isDeletable={rowDeletable}
+                  alwaysVisible
+                />
+            )}
+          </div>
+        </div>
+      );
+    },
+    [
+      columns,
+      listMainColumnKey,
+      listLeftColumnKeys,
+      listLeftSecondaryKeys,
+      listLeftSecondarySeparator,
+      onRowClick,
+      getRowId,
+      showRowMenu,
+      openRowMenuKey,
+      openRowMenuRow,
+      rowMenuPosition,
+      handleOpenRowMenu,
+      closeRowMenu,
+      onRowEdit,
+      onRowDownload,
+      onRowDelete,
+      rowMenuActions,
+      deleteConfirmConfig,
+      rowCanDelete,
+      showRowSelect,
+      selectedRowIds,
+      onToggleRowSelection,
+      onCellActivate,
+      isColumnEditable,
+      cellEdit,
+      cellEditAnchorRef,
+    ],
+  );
+
+  const handleListScroll = (e) => {
+    if (openRowMenuKey) closeRowMenu();
+    if (onListScroll && e?.currentTarget) {
+      const t = e.currentTarget;
+      onListScroll({
+        scrollTop: t.scrollTop,
+        scrollHeight: t.scrollHeight,
+        clientHeight: t.clientHeight,
+      });
+    }
+  };
+
+  const skeletonRowProps = {
+    columns,
+    listLeftColumnKeys,
+    listMainColumnKey,
+    listLeftSecondaryKeys,
+    showRowSelect,
+    showRowMenu,
+  };
+
+  const skeletonRowCount = isLoading ? localSkeletonRows : skeletonRows;
+
+  const renderSkeletonRows = () =>
+    Array.from({ length: skeletonRowCount }).map((_, i) =>
+      renderListSkeletonRow(`skeleton-${i}`, skeletonRowProps),
+    );
+
+  const listWrapClass = [
+    "mdt-group-wrap",
+    hasSelection ? "mdt-has-selection" : "",
+    isLoading ? "mdt-group-wrap--loading" : "",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  if (isLoading) {
+    return (
+      <div
+        ref={wrapRef}
+        className={listWrapClass}
+        onScroll={handleListScroll}
+      >
+        <div className="mdt-group mdt-group--loading">
+          {groupByKey &&
+            renderGroupHead({
+              headTitle: listGroupHeadPrefix || "All",
+              count: listGroupHeadCount ?? 0,
+              groupKey: flatGroupKey,
+              isAllHeader: true,
+              groupRows: [],
+            })}
+          {renderSkeletonRows()}
+        </div>
+      </div>
+    );
+  }
+
+  if (rows.length === 0) {
+    return (
+      <div
+        ref={wrapRef}
+        className={`${listWrapClass} mdt-group-wrap--empty`}
+        onScroll={handleListScroll}
+      >
+        <MdtEmptyState title={emptyStateTitle} />
+      </div>
+    );
+  }
+
+  /* Flat list — e.g. Display → Group by → None (no grey group header bar) */
+  if (!groupByKey) {
+    return (
+      <div ref={wrapRef} className={listWrapClass} onScroll={handleListScroll}>
+        <div className="mdt-group mdt-group--flat">
+          {rows.map((row, idx) => renderRow(row, idx))}
+          {isLoadingMore &&
+            renderListSkeletonRow("loading-more", {
+              ...skeletonRowProps,
+              announce: true,
+            })}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={wrapRef} className={listWrapClass} onScroll={handleListScroll}>
+      {groupedRows.map((group) => {
+        const isCollapsed = collapsedGroups[group.title];
+
+        return (
+          <div className="mdt-group" key={group.title}>
+            {renderGroupHead({
+              headTitle: group.title,
+              count: group.rows.length,
+              groupKey: group.title,
+              groupLabel: group.title,
+              groupRows: group.rows,
+            })}
+            {!isCollapsed && group.rows.map((row, idx) => renderRow(row, idx))}
+          </div>
+        );
+      })}
+      {isLoadingMore &&
+        renderListSkeletonRow("loading-more", {
+          ...skeletonRowProps,
+          announce: true,
+        })}
+    </div>
+  );
+};
+
+export default FlazDataViewList;