@plumile/ui 0.1.164 → 0.1.165

package/lib/esm/components/data-table/ResponsiveRecordList.js

@@ -1,112 +1,112 @@
 import { cx as e } from "../../theme/tools.js";
 import { DataTable as t } from "./DataTable.js";
-import { card as n, cardActionContent as r, cardActions as i, cardBadges as a, cardHeader as o, cardMetaGrid as s, cardMetaItem as c, cardMetaLabel as l, cardMetaValue as u, cardSubtitle as d, cardTitle as f, cardTitleGroup as p, cards as m, cardsOnly as h, cardsViewport as g, containedRoot as _, tableOnly as v } from "./ResponsiveRecordList.css.js";
-import { useEffect as y, useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { card as n, cardActionContent as r, cardActions as i, cardBadges as a, cardHeader as o, cardMetaGrid as s, cardMetaItem as c, cardMetaLabel as l, cardMetaValue as u, cardSubtitle as d, cardTitle as f, cardTitleGroup as p, cardTitleText as m, cards as h, cardsOnly as g, cardsViewport as _, containedRoot as v, tableOnly as y } from "./ResponsiveRecordList.css.js";
+import { useEffect as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
 //#region src/components/data-table/ResponsiveRecordList.tsx
-var w = "(max-width: 767px)", T = (e, t) => e == null ? null : e.cell(t), E = (e, t) => e.find((e) => e.mobileRole === t) ?? null, D = (e) => e.mobileRole === "hidden" ? !1 : e.mobileRole === "meta" ? !0 : e.mobileRole == null ? e.priority === "important" || e.priority === "secondary" : !1, O = () => {
-	let [e, t] = b(() => typeof window > "u" ? !1 : window.matchMedia(w).matches);
-	return y(() => {
+var T = "(max-width: 767px)", E = (e, t) => e == null ? null : e.cell(t), D = (e, t) => e.find((e) => e.mobileRole === t) ?? null, O = (e) => e.mobileRole === "hidden" ? !1 : e.mobileRole === "meta" ? !0 : e.mobileRole == null ? e.priority === "important" || e.priority === "secondary" : !1, k = () => {
+	let [e, t] = x(() => typeof window > "u" ? !1 : window.matchMedia(T).matches);
+	return b(() => {
 		if (typeof window > "u") return () => {};
-		let e = window.matchMedia(w), n = () => {
+		let e = window.matchMedia(T), n = () => {
 			t(e.matches);
 		};
 		return n(), e.addEventListener("change", n), () => {
 			e.removeEventListener("change", n);
 		};
 	}, []), e;
-}, k = ({ columns: y, rows: b, getRowId: w, mode: k = "auto", density: A = "compact", renderAction: j, className: M, bodyScrollMode: N, ...P }) => {
-	let F = N === "contained", I = O(), L = null, R, z = null;
-	F && (L = _, R = g, z = g);
-	let B = E(y, "title") ?? y.find((e) => e.isPrimary === !0 || e.priority === "primary") ?? y[0] ?? null, V = E(y, "subtitle"), H = y.filter((e) => e.mobileRole === "badge" || e.mobileRole === "status"), U = y.filter((e) => e !== B && e !== V && D(e)), W = /* @__PURE__ */ S(x, { children: P.emptyState ?? null });
-	if (b.length > 0 && (W = /* @__PURE__ */ S("div", {
-		className: m,
-		children: b.map((e, t) => {
-			let m = w(e, t), h = T(B, e), g = T(V, e), _ = j?.(e), v = null;
-			g != null && g !== "" && (v = /* @__PURE__ */ S("div", {
+}, A = ({ columns: b, rows: x, getRowId: T, mode: A = "auto", density: j = "compact", renderAction: M, className: N, bodyScrollMode: P, ...F }) => {
+	let I = P === "contained", L = k(), R = null, z, B = null;
+	I && (R = v, z = _, B = _);
+	let V = D(b, "title") ?? b.find((e) => e.isPrimary === !0 || e.priority === "primary") ?? b[0] ?? null, H = D(b, "subtitle"), U = b.filter((e) => e.mobileRole === "badge" || e.mobileRole === "status"), W = b.filter((e) => e !== V && e !== H && O(e)), G = /* @__PURE__ */ C(S, { children: F.emptyState ?? null });
+	if (x.length > 0 && (G = /* @__PURE__ */ C("div", {
+		className: h,
+		children: x.map((t, h) => {
+			let g = T(t, h), _ = E(V, t), v = E(H, t), y = M?.(t), b = null;
+			v != null && v !== "" && (b = /* @__PURE__ */ C("div", {
 				className: d,
-				children: g
+				children: v
 			}));
-			let y = null;
-			_ != null && (y = /* @__PURE__ */ S("div", {
+			let x = null;
+			y != null && (x = /* @__PURE__ */ C("div", {
 				className: i,
-				children: /* @__PURE__ */ S("div", {
+				children: /* @__PURE__ */ C("div", {
 					className: r,
-					children: _
+					children: y
 				})
 			}));
-			let b = null;
-			H.length > 0 && (b = /* @__PURE__ */ S("div", {
+			let S = null;
+			U.length > 0 && (S = /* @__PURE__ */ C("div", {
 				className: a,
-				children: H.map((t) => /* @__PURE__ */ S("span", { children: t.cell(e) }, t.id))
+				children: U.map((e) => /* @__PURE__ */ C("span", { children: e.cell(t) }, e.id))
 			}));
-			let x = null;
-			return U.length > 0 && (x = /* @__PURE__ */ S("dl", {
+			let D = null;
+			return W.length > 0 && (D = /* @__PURE__ */ C("dl", {
 				className: s,
-				children: U.map((t) => /* @__PURE__ */ C("div", {
+				children: W.map((e) => /* @__PURE__ */ w("div", {
 					className: c,
-					children: [/* @__PURE__ */ S("dt", {
+					children: [/* @__PURE__ */ C("dt", {
 						className: l,
-						children: t.header
-					}), /* @__PURE__ */ S("dd", {
+						children: e.header
+					}), /* @__PURE__ */ C("dd", {
 						className: u,
-						children: t.cell(e)
+						children: e.cell(t)
 					})]
-				}, t.id))
-			})), /* @__PURE__ */ C("article", {
-				className: n({ density: A }),
+				}, e.id))
+			})), /* @__PURE__ */ w("article", {
+				className: n({ density: j }),
 				children: [
-					/* @__PURE__ */ C("div", {
+					/* @__PURE__ */ w("div", {
 						className: o,
-						children: [/* @__PURE__ */ C("div", {
+						children: [/* @__PURE__ */ w("div", {
 							className: p,
-							children: [/* @__PURE__ */ S("div", {
-								className: f,
-								children: h
-							}), v]
-						}), y]
+							children: [/* @__PURE__ */ C("div", {
+								className: e(f, m),
+								children: _
+							}), b]
+						}), x]
 					}),
-					b,
-					x
+					S,
+					D
 				]
-			}, m);
+			}, g);
 		})
-	})), k === "cards") return /* @__PURE__ */ S("div", {
-		className: e(M, L),
-		children: /* @__PURE__ */ C("div", {
-			className: R,
-			children: [W, P.bodyFooterNode]
+	})), A === "cards") return /* @__PURE__ */ C("div", {
+		className: e(N, R),
+		children: /* @__PURE__ */ w("div", {
+			className: z,
+			children: [G, F.bodyFooterNode]
 		})
 	});
-	if (k === "table") return /* @__PURE__ */ S(t, {
-		...P,
-		rows: b,
-		columns: y,
-		getRowId: w,
-		className: M,
-		density: A,
-		bodyScrollMode: N,
-		bodyFooterNode: P.bodyFooterNode
+	if (A === "table") return /* @__PURE__ */ C(t, {
+		...F,
+		rows: x,
+		columns: b,
+		getRowId: T,
+		className: N,
+		density: j,
+		bodyScrollMode: P,
+		bodyFooterNode: F.bodyFooterNode
 	});
-	let G = P.bodyFooterNode, K = null;
-	return I && (G = null, K = P.bodyFooterNode), /* @__PURE__ */ C("div", {
-		className: e(M, L),
-		children: [/* @__PURE__ */ S(t, {
-			...P,
-			rows: b,
-			columns: y,
-			getRowId: w,
-			density: A,
-			className: v,
-			bodyScrollMode: N,
-			bodyFooterNode: G
-		}), /* @__PURE__ */ C("div", {
-			className: e(h, z),
-			children: [W, K]
+	let K = F.bodyFooterNode, q = null;
+	return L && (K = null, q = F.bodyFooterNode), /* @__PURE__ */ w("div", {
+		className: e(N, R),
+		children: [/* @__PURE__ */ C(t, {
+			...F,
+			rows: x,
+			columns: b,
+			getRowId: T,
+			density: j,
+			className: y,
+			bodyScrollMode: P,
+			bodyFooterNode: K
+		}), /* @__PURE__ */ w("div", {
+			className: e(g, B),
+			children: [G, q]
 		})]
 	});
 };
 //#endregion
-export { k as ResponsiveRecordList, k as default };
+export { A as ResponsiveRecordList, A as default };
 
 //# sourceMappingURL=ResponsiveRecordList.js.map

package/lib/esm/components/data-table/ResponsiveRecordList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveRecordList.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.tsx"],"sourcesContent":["import { useEffect, useState, type JSX, type ReactNode } from 'react';\n\nimport {\n  DataTable,\n  type DataTableColumn,\n  type DataTableDensity,\n  type DataTableProps,\n} from './DataTable.js';\nimport * as styles from './ResponsiveRecordList.css.js';\nimport { cx } from '../../theme/tools.js';\n\nconst CARDS_MEDIA_QUERY = '(max-width: 767px)';\n\nexport type ResponsiveRecordListMode = 'table' | 'cards' | 'auto';\nexport type ResponsiveRecordListDensity = DataTableDensity;\nexport type ResponsiveRecordListColumn<Row> = DataTableColumn<Row>;\n\nexport type ResponsiveRecordListProps<Row> = Omit<\n  DataTableProps<Row>,\n  'columns'\n> & {\n  columns: readonly ResponsiveRecordListColumn<Row>[];\n  mode?: ResponsiveRecordListMode;\n  density?: ResponsiveRecordListDensity;\n  renderAction?: (row: Row) => ReactNode;\n};\n\nconst renderCellText = <Row,>(\n  column: ResponsiveRecordListColumn<Row> | null,\n  row: Row,\n): ReactNode => {\n  if (column == null) {\n    return null;\n  }\n  return column.cell(row);\n};\n\nconst findColumn = <Row,>(\n  columns: readonly ResponsiveRecordListColumn<Row>[],\n  role: ResponsiveRecordListColumn<Row>['mobileRole'],\n): ResponsiveRecordListColumn<Row> | null => {\n  return (\n    columns.find((column) => {\n      return column.mobileRole === role;\n    }) ?? null\n  );\n};\n\nconst isMetaColumn = <Row,>(\n  column: ResponsiveRecordListColumn<Row>,\n): boolean => {\n  if (column.mobileRole === 'hidden') {\n    return false;\n  }\n  if (column.mobileRole === 'meta') {\n    return true;\n  }\n  if (column.mobileRole != null) {\n    return false;\n  }\n  return column.priority === 'important' || column.priority === 'secondary';\n};\n\nconst useIsCardsViewport = (): boolean => {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === 'undefined') {\n      return false;\n    }\n    return window.matchMedia(CARDS_MEDIA_QUERY).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(CARDS_MEDIA_QUERY);\n    const handleChange = () => {\n      setMatches(mediaQuery.matches);\n    };\n\n    handleChange();\n    mediaQuery.addEventListener('change', handleChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange);\n    };\n  }, []);\n\n  return matches;\n};\n\nexport const ResponsiveRecordList = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  mode = 'auto',\n  density = 'compact',\n  renderAction,\n  className,\n  bodyScrollMode,\n  ...tableProps\n}: ResponsiveRecordListProps<Row>): JSX.Element => {\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n  const isCardsViewport = useIsCardsViewport();\n  let containedRootClassName: string | null = null;\n  let cardsViewportClassName: string | undefined;\n  let containedCardsOnlyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedRootClassName = styles.containedRoot;\n    cardsViewportClassName = styles.cardsViewport;\n    containedCardsOnlyClassName = styles.cardsViewport;\n  }\n  const titleColumn =\n    findColumn(columns, 'title') ??\n    columns.find((column) => {\n      return column.isPrimary === true || column.priority === 'primary';\n    }) ??\n    columns[0] ??\n    null;\n  const subtitleColumn = findColumn(columns, 'subtitle');\n  const badgeColumns = columns.filter((column) => {\n    return column.mobileRole === 'badge' || column.mobileRole === 'status';\n  });\n  const metaColumns = columns.filter((column) => {\n    return (\n      column !== titleColumn &&\n      column !== subtitleColumn &&\n      isMetaColumn(column)\n    );\n  });\n\n  let cards: JSX.Element = <>{tableProps.emptyState ?? null}</>;\n  if (rows.length > 0) {\n    cards = (\n      <div className={styles.cards}>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const title = renderCellText(titleColumn, row);\n          const subtitle = renderCellText(subtitleColumn, row);\n          const action = renderAction?.(row);\n          let subtitleNode: JSX.Element | null = null;\n          if (subtitle != null && subtitle !== '') {\n            subtitleNode = (\n              <div className={styles.cardSubtitle}>{subtitle}</div>\n            );\n          }\n          let actionNode: JSX.Element | null = null;\n          if (action != null) {\n            actionNode = (\n              <div className={styles.cardActions}>\n                <div className={styles.cardActionContent}>{action}</div>\n              </div>\n            );\n          }\n          let badgeNode: JSX.Element | null = null;\n          if (badgeColumns.length > 0) {\n            badgeNode = (\n              <div className={styles.cardBadges}>\n                {badgeColumns.map((column) => {\n                  return <span key={column.id}>{column.cell(row)}</span>;\n                })}\n              </div>\n            );\n          }\n          let metaNode: JSX.Element | null = null;\n          if (metaColumns.length > 0) {\n            metaNode = (\n              <dl className={styles.cardMetaGrid}>\n                {metaColumns.map((column) => {\n                  return (\n                    <div key={column.id} className={styles.cardMetaItem}>\n                      <dt className={styles.cardMetaLabel}>{column.header}</dt>\n                      <dd className={styles.cardMetaValue}>\n                        {column.cell(row)}\n                      </dd>\n                    </div>\n                  );\n                })}\n              </dl>\n            );\n          }\n\n          return (\n            <article key={rowId} className={styles.card({ density })}>\n              <div className={styles.cardHeader}>\n                <div className={styles.cardTitleGroup}>\n                  <div className={styles.cardTitle}>{title}</div>\n                  {subtitleNode}\n                </div>\n                {actionNode}\n              </div>\n              {badgeNode}\n              {metaNode}\n            </article>\n          );\n        })}\n      </div>\n    );\n  }\n\n  if (mode === 'cards') {\n    return (\n      <div className={cx(className, containedRootClassName)}>\n        <div className={cardsViewportClassName}>\n          {cards}\n          {tableProps.bodyFooterNode}\n        </div>\n      </div>\n    );\n  }\n\n  if (mode === 'table') {\n    return (\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        className={className}\n        density={density}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableProps.bodyFooterNode}\n      />\n    );\n  }\n\n  let tableBodyFooterNode = tableProps.bodyFooterNode;\n  let cardsBodyFooterNode: ReactNode = null;\n  if (isCardsViewport) {\n    tableBodyFooterNode = null;\n    cardsBodyFooterNode = tableProps.bodyFooterNode;\n  }\n\n  return (\n    <div className={cx(className, containedRootClassName)}>\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        density={density}\n        className={styles.tableOnly}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableBodyFooterNode}\n      />\n      <div className={cx(styles.cardsOnly, containedCardsOnlyClassName)}>\n        {cards}\n        {cardsBodyFooterNode}\n      </div>\n    </div>\n  );\n};\n\nexport default ResponsiveRecordList;\n"],"mappings":"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"}
+{"version":3,"file":"ResponsiveRecordList.js","names":[],"sources":["../../../../src/components/data-table/ResponsiveRecordList.tsx"],"sourcesContent":["import { useEffect, useState, type JSX, type ReactNode } from 'react';\n\nimport {\n  DataTable,\n  type DataTableColumn,\n  type DataTableDensity,\n  type DataTableProps,\n} from './DataTable.js';\nimport * as styles from './ResponsiveRecordList.css.js';\nimport { cx } from '../../theme/tools.js';\n\nconst CARDS_MEDIA_QUERY = '(max-width: 767px)';\n\nexport type ResponsiveRecordListMode = 'table' | 'cards' | 'auto';\nexport type ResponsiveRecordListDensity = DataTableDensity;\nexport type ResponsiveRecordListColumn<Row> = DataTableColumn<Row>;\n\nexport type ResponsiveRecordListProps<Row> = Omit<\n  DataTableProps<Row>,\n  'columns'\n> & {\n  columns: readonly ResponsiveRecordListColumn<Row>[];\n  mode?: ResponsiveRecordListMode;\n  density?: ResponsiveRecordListDensity;\n  renderAction?: (row: Row) => ReactNode;\n};\n\nconst renderCellText = <Row,>(\n  column: ResponsiveRecordListColumn<Row> | null,\n  row: Row,\n): ReactNode => {\n  if (column == null) {\n    return null;\n  }\n  return column.cell(row);\n};\n\nconst findColumn = <Row,>(\n  columns: readonly ResponsiveRecordListColumn<Row>[],\n  role: ResponsiveRecordListColumn<Row>['mobileRole'],\n): ResponsiveRecordListColumn<Row> | null => {\n  return (\n    columns.find((column) => {\n      return column.mobileRole === role;\n    }) ?? null\n  );\n};\n\nconst isMetaColumn = <Row,>(\n  column: ResponsiveRecordListColumn<Row>,\n): boolean => {\n  if (column.mobileRole === 'hidden') {\n    return false;\n  }\n  if (column.mobileRole === 'meta') {\n    return true;\n  }\n  if (column.mobileRole != null) {\n    return false;\n  }\n  return column.priority === 'important' || column.priority === 'secondary';\n};\n\nconst useIsCardsViewport = (): boolean => {\n  const [matches, setMatches] = useState(() => {\n    if (typeof window === 'undefined') {\n      return false;\n    }\n    return window.matchMedia(CARDS_MEDIA_QUERY).matches;\n  });\n\n  useEffect(() => {\n    if (typeof window === 'undefined') {\n      return () => {};\n    }\n    const mediaQuery = window.matchMedia(CARDS_MEDIA_QUERY);\n    const handleChange = () => {\n      setMatches(mediaQuery.matches);\n    };\n\n    handleChange();\n    mediaQuery.addEventListener('change', handleChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleChange);\n    };\n  }, []);\n\n  return matches;\n};\n\nexport const ResponsiveRecordList = <Row,>({\n  columns,\n  rows,\n  getRowId,\n  mode = 'auto',\n  density = 'compact',\n  renderAction,\n  className,\n  bodyScrollMode,\n  ...tableProps\n}: ResponsiveRecordListProps<Row>): JSX.Element => {\n  const hasContainedBodyScroll = bodyScrollMode === 'contained';\n  const isCardsViewport = useIsCardsViewport();\n  let containedRootClassName: string | null = null;\n  let cardsViewportClassName: string | undefined;\n  let containedCardsOnlyClassName: string | null = null;\n  if (hasContainedBodyScroll) {\n    containedRootClassName = styles.containedRoot;\n    cardsViewportClassName = styles.cardsViewport;\n    containedCardsOnlyClassName = styles.cardsViewport;\n  }\n  const titleColumn =\n    findColumn(columns, 'title') ??\n    columns.find((column) => {\n      return column.isPrimary === true || column.priority === 'primary';\n    }) ??\n    columns[0] ??\n    null;\n  const subtitleColumn = findColumn(columns, 'subtitle');\n  const badgeColumns = columns.filter((column) => {\n    return column.mobileRole === 'badge' || column.mobileRole === 'status';\n  });\n  const metaColumns = columns.filter((column) => {\n    return (\n      column !== titleColumn &&\n      column !== subtitleColumn &&\n      isMetaColumn(column)\n    );\n  });\n\n  let cards: JSX.Element = <>{tableProps.emptyState ?? null}</>;\n  if (rows.length > 0) {\n    cards = (\n      <div className={styles.cards}>\n        {rows.map((row, index) => {\n          const rowId = getRowId(row, index);\n          const title = renderCellText(titleColumn, row);\n          const subtitle = renderCellText(subtitleColumn, row);\n          const action = renderAction?.(row);\n          let subtitleNode: JSX.Element | null = null;\n          if (subtitle != null && subtitle !== '') {\n            subtitleNode = (\n              <div className={styles.cardSubtitle}>{subtitle}</div>\n            );\n          }\n          let actionNode: JSX.Element | null = null;\n          if (action != null) {\n            actionNode = (\n              <div className={styles.cardActions}>\n                <div className={styles.cardActionContent}>{action}</div>\n              </div>\n            );\n          }\n          let badgeNode: JSX.Element | null = null;\n          if (badgeColumns.length > 0) {\n            badgeNode = (\n              <div className={styles.cardBadges}>\n                {badgeColumns.map((column) => {\n                  return <span key={column.id}>{column.cell(row)}</span>;\n                })}\n              </div>\n            );\n          }\n          let metaNode: JSX.Element | null = null;\n          if (metaColumns.length > 0) {\n            metaNode = (\n              <dl className={styles.cardMetaGrid}>\n                {metaColumns.map((column) => {\n                  return (\n                    <div key={column.id} className={styles.cardMetaItem}>\n                      <dt className={styles.cardMetaLabel}>{column.header}</dt>\n                      <dd className={styles.cardMetaValue}>\n                        {column.cell(row)}\n                      </dd>\n                    </div>\n                  );\n                })}\n              </dl>\n            );\n          }\n\n          return (\n            <article key={rowId} className={styles.card({ density })}>\n              <div className={styles.cardHeader}>\n                <div className={styles.cardTitleGroup}>\n                  <div className={cx(styles.cardTitle, styles.cardTitleText)}>\n                    {title}\n                  </div>\n                  {subtitleNode}\n                </div>\n                {actionNode}\n              </div>\n              {badgeNode}\n              {metaNode}\n            </article>\n          );\n        })}\n      </div>\n    );\n  }\n\n  if (mode === 'cards') {\n    return (\n      <div className={cx(className, containedRootClassName)}>\n        <div className={cardsViewportClassName}>\n          {cards}\n          {tableProps.bodyFooterNode}\n        </div>\n      </div>\n    );\n  }\n\n  if (mode === 'table') {\n    return (\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        className={className}\n        density={density}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableProps.bodyFooterNode}\n      />\n    );\n  }\n\n  let tableBodyFooterNode = tableProps.bodyFooterNode;\n  let cardsBodyFooterNode: ReactNode = null;\n  if (isCardsViewport) {\n    tableBodyFooterNode = null;\n    cardsBodyFooterNode = tableProps.bodyFooterNode;\n  }\n\n  return (\n    <div className={cx(className, containedRootClassName)}>\n      <DataTable\n        {...tableProps}\n        rows={rows}\n        columns={columns}\n        getRowId={getRowId}\n        density={density}\n        className={styles.tableOnly}\n        bodyScrollMode={bodyScrollMode}\n        bodyFooterNode={tableBodyFooterNode}\n      />\n      <div className={cx(styles.cardsOnly, containedCardsOnlyClassName)}>\n        {cards}\n        {cardsBodyFooterNode}\n      </div>\n    </div>\n  );\n};\n\nexport default ResponsiveRecordList;\n"],"mappings":"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"}