@box/metadata-view 2.1.1 → 2.2.0

package/dist/chunks/table-row.js

@@ -1,12 +1,12 @@
 import { t as e } from "./types.js";
-import { t } from "./item-action-menu.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as n } from "../esm/lib/components/constants.js";
-import { ActionCell as r, Cell as i, Row as a, Text as o } from "@box/blueprint-web";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { ItemTypeIcon as l } from "@box/item-icon";
-import u from "clsx";
-import d from "lodash/get";
-import '../styles/table-row.css';var f = {
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as t } from "../esm/lib/components/constants.js";
+import { ActionCellContent as n } from "../esm/lib/components/metadata-table/table-body/action-cell-content.js";
+import { Cell as r, Row as i, Text as a } from "@box/blueprint-web";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { ItemTypeIcon as c } from "@box/item-icon";
+import l from "clsx";
+import u from "lodash/get";
+import '../styles/table-row.css';var d = {
 	tableHeaderActionsWrapper: "_tableHeaderActionsWrapper_1sntd_1",
 	tableHeaderActions: "_tableHeaderActions_1sntd_1",
 	tableRow: "_tableRow_1sntd_33",
@@ -18,56 +18,54 @@ import '../styles/table-row.css';var f = {
 	tableNameCellText: "_tableNameCellText_1sntd_65",
 	tableNameCellIconInline: "_tableNameCellIconInline_1sntd_70",
 	iconCell: "_iconCell_1sntd_74"
-}, p = ({ areSelectionCheckboxesDisabled: p, columns: m, dataTargetPrefix: h, iconColumnVariant: g, item: _, itemActionMenuProps: v, onTableRowClick: y, shouldRenderActionColumn: b, zoomLevel: x = 0 }) => /* @__PURE__ */ c(a, {
-	className: u(f.tableRow, { [f.isClickable]: y }),
-	"data-target-id": h ? `${h}-itemRow-${_.id}` : void 0,
-	id: _.id,
-	onAction: () => y?.(_),
+}, f = ({ areSelectionCheckboxesDisabled: f, columns: p, dataTargetPrefix: m, iconColumnVariant: h, item: g, itemActionMenuProps: _, onTableRowClick: v, renderActionCell: y, shouldRenderActionColumn: b, zoomLevel: x = 0 }) => /* @__PURE__ */ s(i, {
+	className: l(d.tableRow, { [d.isClickable]: v }),
+	"data-target-id": m ? `${m}-itemRow-${g.id}` : void 0,
+	id: g.id,
+	onAction: () => v?.(g),
 	children: [
-		g === e.COLUMN ? /* @__PURE__ */ s(i, {
-			style: { height: n[x] },
-			children: /* @__PURE__ */ s(l, {
-				className: f.iconCell,
-				item: _
+		h === e.COLUMN ? /* @__PURE__ */ o(r, {
+			style: { height: t[x] },
+			children: /* @__PURE__ */ o(c, {
+				className: d.iconCell,
+				item: g
 			})
-		}, `item-type-icon-${_.id}`) : null,
-		m.map((t) => {
-			let { cellRenderer: n, id: r, isItemMetadata: a, subtitle: p, textValue: m, type: h } = t, v = `${m}-${_.id}`;
-			if (n) return /* @__PURE__ */ s(i, { children: n(_, t) }, v);
-			let y = d(_, a ? r.split(".")[1] : r);
-			if (r === "name" && (g === e.INLINE || g === e.INLINE_SUBTITLE)) return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c("div", {
-				className: f.tableNameCell,
-				children: [/* @__PURE__ */ s(l, { item: _ }), /* @__PURE__ */ c("div", {
-					className: u(f.tableNameCellTitle, { [f.hasSubtitle]: g === e.INLINE_SUBTITLE }),
-					children: [/* @__PURE__ */ s(o, {
+		}, `item-type-icon-${g.id}`) : null,
+		p.map((t) => {
+			let { cellRenderer: n, id: i, isItemMetadata: f, subtitle: p, textValue: m, type: _ } = t, v = `${m}-${g.id}`;
+			if (n) return /* @__PURE__ */ o(r, { children: n(g, t) }, v);
+			let y = u(g, f ? i.split(".")[1] : i);
+			if (i === "name" && (h === e.INLINE || h === e.INLINE_SUBTITLE)) return /* @__PURE__ */ o(r, { children: /* @__PURE__ */ s("div", {
+				className: d.tableNameCell,
+				children: [/* @__PURE__ */ o(c, { item: g }), /* @__PURE__ */ s("div", {
+					className: l(d.tableNameCellTitle, { [d.hasSubtitle]: h === e.INLINE_SUBTITLE }),
+					children: [/* @__PURE__ */ o(a, {
 						as: "span",
-						className: f.tableNameCellText,
+						className: d.tableNameCellText,
 						children: y
-					}), g === e.INLINE_SUBTITLE ? /* @__PURE__ */ s(o, {
+					}), h === e.INLINE_SUBTITLE ? /* @__PURE__ */ o(a, {
 						as: "span",
-						className: f.tableNameCellText,
+						className: d.tableNameCellText,
 						color: "textOnLightSecondary",
 						children: p
 					}) : null]
 				})]
 			}) }, v);
-			if (h === "multiSelect") {
-				let e = d(_, r);
-				return /* @__PURE__ */ s(i, { children: e ? e.join(" ") : "" }, v);
+			if (_ === "multiSelect") {
+				let e = u(g, i);
+				return /* @__PURE__ */ o(r, { children: e ? e.join(" ") : "" }, v);
 			}
-			return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ s(o, {
+			return /* @__PURE__ */ o(r, { children: /* @__PURE__ */ o(a, {
 				as: "span",
 				children: y
 			}) }, v);
 		}),
-		b && /* @__PURE__ */ s(r, {
-			isCheckboxDisabled: p,
-			children: (e) => v ? /* @__PURE__ */ s(t, {
-				...v,
-				item: _,
-				onOpenChange: e
-			}) : null
+		b && /* @__PURE__ */ o(n, {
+			isCheckboxDisabled: f,
+			item: g,
+			itemActionMenuProps: _,
+			renderActionCell: y
 		})
 	]
-}, _.id);
-export { f as n, p as t };
+}, g.id);
+export { d as n, f as t };

package/dist/esm/lib/components/metadata-table/actionColumn.js

@@ -1,4 +1,4 @@
-function e(e) {
-	return !!e.HeaderActions || e?.selectionMode && e.selectionMode !== "none";
+function e(e, t) {
+	return !!(t || e.HeaderActions || e?.selectionMode && e.selectionMode !== "none");
 }
 export { e as getShouldRenderActionColumn };

package/dist/esm/lib/components/metadata-table/hooks/useInfiniteScrollTableItems.js

@@ -1,8 +1,8 @@
 import { useEffect as e, useMemo as t, useRef as n } from "react";
 import { useVirtualizer as r } from "@tanstack/react-virtual";
 import { Size14 as i } from "@box/blueprint-web-assets/tokens/px-tokens";
-var a = parseInt(i, 10), o = ({ items: i, hasNextPage: o = !1, isLoading: s = !1, parentRef: c, approximateRowHeight: l = a, onGetNextPage: u, placeholderRowsCount: d = 20 }) => {
-	let f = n(0), p = r({
+var a = parseInt(i, 10), o = ({ items: i, hasNextPage: o = !1, isLoading: s = !1, parentRef: c, approximateRowHeight: l = a, onGetNextPage: u, placeholderRowsCount: d = 20, getItemKey: f, onVisibleRangeChange: p }) => {
+	let m = n(0), h = n(!1), g = r({
 		count: t(() => i.length + (s || o ? d : 0), [
 			i,
 			o,
@@ -10,16 +10,43 @@ var a = parseInt(i, 10), o = ({ items: i, hasNextPage: o = !1, isLoading: s = !1
 			d
 		]),
 		getScrollElement: () => c.current,
-		getItemKey: (e) => i[e]?.id || `table-item-${e}`,
+		getItemKey: (e) => {
+			let t = i[e];
+			return t && f ? f(t, e) : t?.id || `table-item-${e}`;
+		},
 		estimateSize: () => l
-	}), m = p.getVirtualItems();
+	}), _ = g.getVirtualItems(), v = i[0]?.id;
 	e(() => {
-		f.current = i.length;
-	}, [i.length]), (i.length === 0 || i.length > 0 && f.current === 0) && c.current && (c.current.scrollTop = 0);
-	let h = m[m.length - 1], g = !!h && h.index >= i.length - 1;
-	return !s && g && o && u && u(), {
-		totalVirtualSize: p.getTotalSize(),
-		virtualItemsToDisplay: m
+		h.current = !1, m.current = i.length;
+	}, [i.length, v]), (i.length === 0 || i.length > 0 && m.current === 0) && c.current && (c.current.scrollTop = 0);
+	let y = _[_.length - 1], b = !!y && y.index >= i.length - 1;
+	e(() => {
+		if (!b) {
+			s || (h.current = !1);
+			return;
+		}
+		!s && o && u && !h.current && (h.current = !0, u());
+	}, [
+		s,
+		b,
+		o,
+		u,
+		i.length,
+		v
+	]);
+	let x = _[0]?.index ?? -1, S = _[_.length - 1]?.index ?? -1, C = x < i.length ? x : -1, w = Math.min(S, i.length - 1);
+	return e(() => {
+		!p || C < 0 || p({
+			startIndex: C,
+			endIndex: w
+		});
+	}, [
+		C,
+		w,
+		p
+	]), {
+		totalVirtualSize: g.getTotalSize(),
+		virtualItemsToDisplay: _
 	};
 };
 export { o as useInfiniteScrollTableItems };

package/dist/esm/lib/components/metadata-table/metadata-table.js

@@ -9,19 +9,21 @@ import { Column as s, DataTableWrapper as c, ListCheckbox as l, TableHeader as u
 import { useRef as f } from "react";
 import { useIntl as p } from "react-intl";
 import { jsx as m, jsxs as h } from "react/jsx-runtime";
-var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix: v, hasNextPage: y = !1, iconColumnVariant: b, isInfiniteScrollEnabled: x = !1, isLoading: S = !1, isSelectAllEnabled: C, itemActionMenuProps: w, items: T, maxActionColumnWidth: E, minActionColumnWidth: D, onGetNextPage: O, onInlineEditChange: k, onTableRowClick: A, placeholderRowsCount: j, zoomLevel: M, ...N }) => {
-	let { formatMessage: P } = p(), F = f(null), { virtualItemsToDisplay: I, totalVirtualSize: L } = n({
+var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix: v, hasNextPage: y = !1, iconColumnVariant: b, isInfiniteScrollEnabled: x = !1, isLoading: S = !1, isSelectAllEnabled: C, itemActionMenuProps: w, items: T, maxActionColumnWidth: E, minActionColumnWidth: D, onGetNextPage: O, onInlineEditChange: k, onTableRowClick: A, placeholderRowsCount: j, zoomLevel: M, getItemKey: N, onVisibleRangeChange: P, renderActionCell: F, ...I }) => {
+	let { formatMessage: L } = p(), R = f(null), { virtualItemsToDisplay: z, totalVirtualSize: B } = n({
 		items: T,
 		hasNextPage: y,
 		isLoading: S,
-		parentRef: F,
+		parentRef: R,
 		onGetNextPage: O,
-		placeholderRowsCount: j
-	}), R = [];
+		placeholderRowsCount: j,
+		getItemKey: N,
+		onVisibleRangeChange: P
+	}), V = [];
 	if (b === e.COLUMN) {
 		M ||= 0;
 		let e = parseInt(t[M], 10) + 24;
-		R.push({
+		V.push({
 			id: "item-type-icon",
 			isRowHeader: !1,
 			hideHeader: !1,
@@ -29,7 +31,7 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix:
 			maxWidth: e
 		});
 	}
-	let z = _.map((e) => {
+	let H = _.map((e) => {
 		let { id: t, isRowHeader: n, headerRenderer: r, textValue: i, type: a, allowsSorting: o, ...s } = e, c = a !== "multiSelect" && a !== "enum" && o === !0;
 		return {
 			...s,
@@ -43,13 +45,13 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix:
 			allowsSorting: c
 		};
 	});
-	R.push(...z), a(N) && R.push({
+	V.push(...H), a(I, !!F) && V.push({
 		id: "actions",
 		className: i.tableHeaderActions,
 		children: /* @__PURE__ */ h("div", {
 			className: i.tableHeaderActionsWrapper,
-			children: [N.HeaderActions, C ? /* @__PURE__ */ m(l, {
-				"aria-label": P(r.selectAll),
+			children: [I.HeaderActions, C ? /* @__PURE__ */ m(l, {
+				"aria-label": L(r.selectAll),
 				className: i.selectAllCheckbox,
 				isDisabled: S || g
 			}) : null]
@@ -60,14 +62,14 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix:
 		maxWidth: E,
 		minWidth: D
 	});
-	let B = /* @__PURE__ */ m(u, {
-		columns: R,
+	let U = /* @__PURE__ */ m(u, {
+		columns: V,
 		children: (e) => /* @__PURE__ */ m(s, { ...e })
-	}), V = {
-		columnCount: R.length,
+	}), W = {
+		columnCount: V.length,
 		columns: _,
 		dataTargetPrefix: v,
-		formatMessage: P,
+		formatMessage: L,
 		iconColumnVariant: b,
 		isLoading: S,
 		areSelectionCheckboxesDisabled: g,
@@ -75,17 +77,18 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, dataTargetPrefix:
 		items: T,
 		onInlineEditChange: k,
 		onTableRowClick: A,
-		tableHeader: B,
-		tableProps: N,
-		zoomLevel: M
+		tableHeader: U,
+		tableProps: I,
+		zoomLevel: M,
+		renderActionCell: F
 	};
 	return x ? /* @__PURE__ */ m(c, {
-		ref: F,
+		ref: R,
 		children: /* @__PURE__ */ m(o, {
-			...V,
-			totalVirtualSize: L,
-			virtualItems: I
+			...W,
+			totalVirtualSize: B,
+			virtualItems: z
 		})
-	}) : /* @__PURE__ */ m(o, { ...V });
+	}) : /* @__PURE__ */ m(o, { ...W });
 };
 export { g as MetadataTable };

package/dist/esm/lib/components/metadata-table/table-body/action-cell-content.js

@@ -0,0 +1,13 @@
+import { t as e } from "../../../../../chunks/item-action-menu.js";
+import { ActionCell as t } from "@box/blueprint-web";
+import n from "react";
+import { jsx as r } from "react/jsx-runtime";
+var i = /*#__PURE__*/ n.memo(({ item: n, itemActionMenuProps: i, isCheckboxDisabled: a, renderActionCell: o }) => /* @__PURE__ */ r(t, {
+	isCheckboxDisabled: a,
+	children: (t) => o ? o(n, t) : i ? /* @__PURE__ */ r(e, {
+		...i,
+		item: n,
+		onOpenChange: t
+	}) : null
+}));
+export { i as ActionCellContent };

package/dist/esm/lib/components/metadata-table/table-body/table-body-with-data.js

@@ -1,138 +1,133 @@
 import { t as e } from "../../../../../chunks/types.js";
-import { t } from "../../../../../chunks/item-action-menu.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as n } from "../../constants.js";
-import { GhostTableRow as r } from "./ghost-table-row/ghost-table-row.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as t } from "../../constants.js";
+import { GhostTableRow as n } from "./ghost-table-row/ghost-table-row.js";
+import { ActionCellContent as r } from "./action-cell-content.js";
 import { t as i } from "../../../../../chunks/inline-editing-cell.js";
 import { n as a, t as o } from "../../../../../chunks/table-row.js";
-import { ActionCell as s, Cell as c, Row as l, TableBody as u, Text as d } from "@box/blueprint-web";
-import f from "react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
-import { ItemTypeIcon as h } from "@box/item-icon";
-import g from "clsx";
-import _ from "lodash/get";
-var v = (e, t, n) => _(e, n ? t.split(".")[1] : t), y = /*#__PURE__*/ f.memo(({ column: t, iconColumnVariant: n, item: r }) => {
-	let { id: i, isItemMetadata: o, subtitle: s, textValue: l } = t, u = `${l}-${r.id}`;
-	return /* @__PURE__ */ p(c, { children: /* @__PURE__ */ m("div", {
+import { Cell as s, Row as c, TableBody as l, Text as u } from "@box/blueprint-web";
+import d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { ItemTypeIcon as m } from "@box/item-icon";
+import h from "clsx";
+import g from "lodash/get";
+var _ = (e, t, n) => g(e, n ? t.split(".")[1] : t), v = /*#__PURE__*/ d.memo(({ column: t, iconColumnVariant: n, item: r }) => {
+	let { id: i, isItemMetadata: o, subtitle: c, textValue: l } = t, d = `${l}-${r.id}`;
+	return /* @__PURE__ */ f(s, { children: /* @__PURE__ */ p("div", {
 		className: a.tableNameCell,
-		children: [/* @__PURE__ */ p(h, {
+		children: [/* @__PURE__ */ f(m, {
 			className: a.tableNameCellIconInline,
 			item: r
-		}), /* @__PURE__ */ m("div", {
-			className: g(a.tableNameCellTitle, { [a.hasSubtitle]: n === e.INLINE_SUBTITLE }),
-			children: [/* @__PURE__ */ p(d, {
+		}), /* @__PURE__ */ p("div", {
+			className: h(a.tableNameCellTitle, { [a.hasSubtitle]: n === e.INLINE_SUBTITLE }),
+			children: [/* @__PURE__ */ f(u, {
 				as: "span",
 				className: a.tableNameCellText,
-				children: v(r, i, o)
-			}), n === e.INLINE_SUBTITLE && /* @__PURE__ */ p(d, {
+				children: _(r, i, o)
+			}), n === e.INLINE_SUBTITLE && /* @__PURE__ */ f(u, {
 				as: "span",
 				className: a.tableNameCellText,
 				color: "textOnLightSecondary",
-				children: s
+				children: c
 			})]
 		})]
-	}) }, u);
-}), b = /*#__PURE__*/ f.memo(({ column: e, item: t }) => {
+	}) }, d);
+}), y = /*#__PURE__*/ d.memo(({ column: e, item: t }) => {
 	let n = `${e.textValue}-${t.id}`;
-	return /* @__PURE__ */ p(c, { children: e.cellRenderer?.(t, e) }, n);
-}), x = /*#__PURE__*/ f.memo(({ column: e, item: t }) => {
-	let n = `${e.textValue}-${t.id}`, r = _(t, e.id);
-	return r ? /* @__PURE__ */ p(c, { children: r.join(" ") }, n) : /* @__PURE__ */ p(c, {}, n);
-}), S = /*#__PURE__*/ f.memo(({ column: e, item: t }) => {
+	return /* @__PURE__ */ f(s, { children: e.cellRenderer?.(t, e) }, n);
+}), b = /*#__PURE__*/ d.memo(({ column: e, item: t }) => {
+	let n = `${e.textValue}-${t.id}`, r = g(t, e.id);
+	return r ? /* @__PURE__ */ f(s, { children: r.join(" ") }, n) : /* @__PURE__ */ f(s, {}, n);
+}), x = /*#__PURE__*/ d.memo(({ column: e, item: t }) => {
 	let { id: n, isItemMetadata: r, textValue: i } = e, a = `${i}-${t.id}`;
-	return /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(d, {
+	return /* @__PURE__ */ f(s, { children: /* @__PURE__ */ f(u, {
 		as: "span",
-		children: v(t, n, r)
+		children: _(t, n, r)
 	}) }, a);
-}), C = /*#__PURE__*/ f.memo(({ column: t, iconColumnVariant: n, item: r, onInlineEditChange: a }) => {
+}), S = /*#__PURE__*/ d.memo(({ column: t, iconColumnVariant: n, item: r, onInlineEditChange: a }) => {
 	let { cellRenderer: o, id: s, isInlineEditingEnabled: c, type: l } = t, u = s === "item.name" && (n === e.INLINE || n === e.INLINE_SUBTITLE);
-	return o ? /* @__PURE__ */ p(b, {
+	return o ? /* @__PURE__ */ f(y, {
 		column: t,
 		item: r
-	}) : u ? /* @__PURE__ */ p(y, {
+	}) : u ? /* @__PURE__ */ f(v, {
 		column: t,
 		iconColumnVariant: n,
 		item: r
-	}) : c && (l === "multiSelect" || l === "enum") ? /* @__PURE__ */ p(i, {
+	}) : c && (l === "multiSelect" || l === "enum") ? /* @__PURE__ */ f(i, {
 		column: t,
 		item: r,
 		onInlineEditChange: a
-	}, `${t.id}-${r.id}`) : p(l === "multiSelect" ? x : S, {
+	}, `${t.id}-${r.id}`) : f(l === "multiSelect" ? b : x, {
 		column: t,
 		item: r
 	});
-}), w = /*#__PURE__*/ f.memo(({ item: e, zoomLevel: t }) => /* @__PURE__ */ p(c, {
-	style: { height: n[t] },
-	children: /* @__PURE__ */ p(h, {
+}), C = /*#__PURE__*/ d.memo(({ item: e, zoomLevel: n }) => /* @__PURE__ */ f(s, {
+	style: { height: t[n] },
+	children: /* @__PURE__ */ f(m, {
 		className: a.iconCell,
 		item: e
 	})
-}, `item-type-icon-${e.id}`)), T = /*#__PURE__*/ f.memo(({ item: e, itemActionMenuProps: n, isCheckboxDisabled: r }) => /* @__PURE__ */ p(s, {
-	isCheckboxDisabled: r,
-	children: (r) => n ? /* @__PURE__ */ p(t, {
-		...n,
-		item: e,
-		onOpenChange: r
-	}) : null
-})), E = ({ areSelectionCheckboxesDisabled: t, columnCount: n, columns: i, dataTargetPrefix: s, iconColumnVariant: c, items: d, itemActionMenuProps: f, onInlineEditChange: h, onTableRowClick: _, shouldRenderActionColumn: v, virtualItems: y, totalVirtualSize: b, zoomLevel: x }) => {
-	let S = c === e.COLUMN;
-	if (y) {
-		let e = (e) => /* @__PURE__ */ p(r, {
-			columnLength: n || 0,
+}, `item-type-icon-${e.id}`)), w = ({ areSelectionCheckboxesDisabled: t, columnCount: i, columns: s, dataTargetPrefix: u, iconColumnVariant: d, items: m, itemActionMenuProps: g, onInlineEditChange: _, onTableRowClick: v, renderActionCell: y, shouldRenderActionColumn: b, virtualItems: x, totalVirtualSize: w, zoomLevel: T }) => {
+	let E = d === e.COLUMN;
+	if (x) {
+		let e = (e) => /* @__PURE__ */ f(n, {
+			columnLength: i || 0,
 			rowKey: `ghost-${e}`
-		}), a = (e) => /* @__PURE__ */ p(o, {
+		}), r = (e) => /* @__PURE__ */ f(o, {
 			areSelectionCheckboxesDisabled: t,
-			columns: i,
-			dataTargetPrefix: s,
-			iconColumnVariant: c,
+			columns: s,
+			dataTargetPrefix: u,
+			iconColumnVariant: d,
 			item: e,
-			itemActionMenuProps: f,
-			onTableRowClick: _,
-			shouldRenderActionColumn: v,
-			zoomLevel: x
-		}), h = () => y[0]?.start || 0, g = () => {
-			let e = y[y.length - 1]?.end || 0;
-			return Math.max((b || 0) - e, 0);
-		}, S = h(), C = g();
-		return /* @__PURE__ */ m(u, { children: [
-			!!S && /* @__PURE__ */ p(l, {
+			itemActionMenuProps: g,
+			onTableRowClick: v,
+			renderActionCell: y,
+			shouldRenderActionColumn: b,
+			zoomLevel: T
+		}), a = () => x[0]?.start || 0, h = () => {
+			let e = x[x.length - 1]?.end || 0;
+			return Math.max((w || 0) - e, 0);
+		}, _ = a(), S = h();
+		return /* @__PURE__ */ p(l, { children: [
+			!!_ && /* @__PURE__ */ f(c, {
 				isDisabled: !0,
-				style: { height: `${S}px` }
+				style: { height: `${_}px` }
 			}),
-			y.map(({ index: t }) => t >= d.length ? e(t) : a(d[t])),
-			!!C && /* @__PURE__ */ p(l, {
+			x.map(({ index: t }) => t >= m.length ? e(t) : r(m[t])),
+			!!S && /* @__PURE__ */ f(c, {
 				isDisabled: !0,
-				style: { height: `${C}px` }
+				style: { height: `${S}px` }
 			})
 		] });
 	}
-	return /* @__PURE__ */ p(u, {
-		items: d.map((e) => ({
+	return /* @__PURE__ */ f(l, {
+		items: m.map((e) => ({
 			key: e.id,
 			...e
 		})),
-		children: (e) => /* @__PURE__ */ m(l, {
-			className: g(a.tableRow, { [a.isClickable]: _ }),
-			"data-target-id": s ? `${s}-itemRow-${e.id}` : void 0,
+		children: (e) => /* @__PURE__ */ p(c, {
+			className: h(a.tableRow, { [a.isClickable]: v }),
+			"data-target-id": u ? `${u}-itemRow-${e.id}` : void 0,
 			id: e.id,
-			onAction: () => _?.(e),
+			onAction: () => v?.(e),
 			children: [
-				S && /* @__PURE__ */ p(w, {
+				E && /* @__PURE__ */ f(C, {
 					item: e,
-					zoomLevel: x
+					zoomLevel: T
 				}),
-				i.map((t) => /* @__PURE__ */ p(C, {
+				s.map((t) => /* @__PURE__ */ f(S, {
 					column: t,
-					iconColumnVariant: c,
+					iconColumnVariant: d,
 					item: e,
-					onInlineEditChange: h
+					onInlineEditChange: _
 				}, `${t.textValue}-${e.id}`)),
-				v && /* @__PURE__ */ p(T, {
+				b && /* @__PURE__ */ f(r, {
 					isCheckboxDisabled: t,
 					item: e,
-					itemActionMenuProps: f
+					itemActionMenuProps: g,
+					renderActionCell: y
 				})
 			]
 		}, e.id)
 	});
 };
-export { E as default };
+export { w as default };

package/dist/esm/lib/components/metadata-table/table-renderer.js

@@ -5,19 +5,19 @@ import r from "./table-body/table-body-with-data.js";
 import { getShouldRenderActionColumn as i } from "./actionColumn.js";
 import { Table as a } from "@box/blueprint-web";
 import { jsx as o, jsxs as s } from "react/jsx-runtime";
-var c = ({ columnCount: c, columns: l, dataTargetPrefix: u, formatMessage: d, iconColumnVariant: f, isLoading: p, areSelectionCheckboxesDisabled: m, itemActionMenuProps: h, items: g, onInlineEditChange: _, onTableRowClick: v, style: y, tableHeader: b, tableProps: x, virtualItems: S, totalVirtualSize: C, zoomLevel: w }) => {
-	let T = i(x), E = c || (() => {
+var c = ({ columnCount: c, columns: l, dataTargetPrefix: u, formatMessage: d, iconColumnVariant: f, isLoading: p, areSelectionCheckboxesDisabled: m, itemActionMenuProps: h, items: g, onInlineEditChange: _, onTableRowClick: v, renderActionCell: y, style: b, tableHeader: x, tableProps: S, virtualItems: C, totalVirtualSize: w, zoomLevel: T }) => {
+	let E = i(S, !!y), D = c || (() => {
 		let t = l.length;
-		return f === e.COLUMN && (t += 1), T && (t += 1), t;
-	})(), D = p && !S?.length;
+		return f === e.COLUMN && (t += 1), E && (t += 1), t;
+	})(), O = p && !C?.length;
 	return /* @__PURE__ */ s(a, {
 		"aria-label": d(n.listView),
 		selectionBehavior: "toggle",
-		style: y,
-		...x,
-		children: [b, D ? /* @__PURE__ */ o(t, { columnLength: E }) : /* @__PURE__ */ o(r, {
+		style: b,
+		...S,
+		children: [x, O ? /* @__PURE__ */ o(t, { columnLength: D }) : /* @__PURE__ */ o(r, {
 			areSelectionCheckboxesDisabled: m,
-			columnCount: E,
+			columnCount: D,
 			columns: l,
 			dataTargetPrefix: u,
 			iconColumnVariant: f,
@@ -26,10 +26,11 @@ var c = ({ columnCount: c, columns: l, dataTargetPrefix: u, formatMessage: d, ic
 			items: g,
 			onInlineEditChange: _,
 			onTableRowClick: v,
-			shouldRenderActionColumn: T,
-			totalVirtualSize: C,
-			virtualItems: S,
-			zoomLevel: w
+			renderActionCell: y,
+			shouldRenderActionColumn: E,
+			totalVirtualSize: w,
+			virtualItems: C,
+			zoomLevel: T
 		})]
 	});
 };

package/dist/types/lib/components/metadata-table/actionColumn.d.ts

@@ -2,5 +2,5 @@ interface TableProps {
     HeaderActions?: React.ReactElement;
     selectionMode?: string;
 }
-export declare function getShouldRenderActionColumn(tableProps: TableProps): boolean;
+export declare function getShouldRenderActionColumn(tableProps: TableProps, hasRenderActionCell?: boolean): boolean;
 export {};

package/dist/types/lib/components/metadata-table/hooks/useInfiniteScrollTableItems.d.ts

@@ -1,4 +1,9 @@
 import { Item } from '@box/types';
+/** The indices of the first and last currently-virtualized (visible) rows. */
+export type VisibleRange = {
+    startIndex: number;
+    endIndex: number;
+};
 type UseInfiniteScrollTableItemsProps = {
     items: Item[];
     hasNextPage?: boolean;
@@ -7,8 +12,12 @@ type UseInfiniteScrollTableItemsProps = {
     approximateRowHeight?: number;
     onGetNextPage?: () => void;
     placeholderRowsCount?: number;
+    /** Custom key function for the virtualizer. Defaults to item.id. */
+    getItemKey?: (item: Item, index: number) => string;
+    /** Called when the first or last visible row index changes. */
+    onVisibleRangeChange?: (range: VisibleRange) => void;
 };
-export declare const useInfiniteScrollTableItems: ({ items, hasNextPage, isLoading, parentRef, approximateRowHeight, onGetNextPage, placeholderRowsCount, }: UseInfiniteScrollTableItemsProps) => {
+export declare const useInfiniteScrollTableItems: ({ items, hasNextPage, isLoading, parentRef, approximateRowHeight, onGetNextPage, placeholderRowsCount, getItemKey, onVisibleRangeChange, }: UseInfiniteScrollTableItemsProps) => {
     totalVirtualSize: number;
     virtualItemsToDisplay: import('@tanstack/virtual-core').VirtualItem[];
 };

package/dist/types/lib/components/metadata-table/index.d.ts

@@ -1,5 +1,5 @@
 export { MetadataTable } from './metadata-table';
-export type { MetadataTableProps } from './metadata-table';
+export type { MetadataTableProps, RenderActionCell, VisibleRange } from './metadata-table';
 export { InlineEditingCell } from './table-body/inline-editing-cell';
 export type { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export * from './table-renderer';

package/dist/types/lib/components/metadata-table/metadata-table.d.ts

@@ -1,7 +1,11 @@
 import { TableProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
+import { VisibleRange } from './hooks/useInfiniteScrollTableItems';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
 import { InlineEditingCellProps } from './table-body/inline-editing-cell';
+export type { VisibleRange };
+/** Custom action cell renderer. When provided, replaces ItemActionMenu inside ActionCell. */
+export type RenderActionCell = (item: Item, onOpenChange: (open: boolean) => void) => React.ReactNode;
 export interface MetadataTableProps extends TableProps, MetadataProps, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     areSelectionCheckboxesDisabled?: boolean;
     columns: Column[];
@@ -17,5 +21,8 @@ export interface MetadataTableProps extends TableProps, MetadataProps, Pick<Inli
     onTableRowClick?: (item: Item) => void;
     placeholderRowsCount?: number;
     zoomLevel?: number;
+    getItemKey?: (item: Item, index: number) => string;
+    onVisibleRangeChange?: (range: VisibleRange) => void;
+    renderActionCell?: RenderActionCell;
 }
-export declare const MetadataTable: ({ areSelectionCheckboxesDisabled, columns, dataTargetPrefix, hasNextPage, iconColumnVariant, isInfiniteScrollEnabled, isLoading, isSelectAllEnabled, itemActionMenuProps, items, maxActionColumnWidth, minActionColumnWidth, onGetNextPage, onInlineEditChange, onTableRowClick, placeholderRowsCount, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataTable: ({ areSelectionCheckboxesDisabled, columns, dataTargetPrefix, hasNextPage, iconColumnVariant, isInfiniteScrollEnabled, isLoading, isSelectAllEnabled, itemActionMenuProps, items, maxActionColumnWidth, minActionColumnWidth, onGetNextPage, onInlineEditChange, onTableRowClick, placeholderRowsCount, zoomLevel, getItemKey, onVisibleRangeChange, renderActionCell, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/metadata-table/table-body/action-cell-content.d.ts

@@ -0,0 +1,17 @@
+import { Item } from '@box/types';
+import { default as React } from 'react';
+import { ItemActionMenuProps } from '../../item-action-menu';
+import { RenderActionCell } from '../metadata-table';
+export interface ActionCellContentProps {
+    item: Item;
+    itemActionMenuProps?: Omit<ItemActionMenuProps, 'item' | 'onOpenChange' | 'viewMode'>;
+    isCheckboxDisabled?: boolean;
+    renderActionCell?: RenderActionCell;
+}
+/**
+ * Renders the trailing action cell for a table row. A consumer-provided
+ * `renderActionCell` takes precedence; otherwise it falls back to the default
+ * `ItemActionMenu`. Shared by both the virtualized (TableRow) and
+ * non-virtualized (TableBodyWithData) render paths.
+ */
+export declare const ActionCellContent: React.MemoExoticComponent<({ item, itemActionMenuProps, isCheckboxDisabled, renderActionCell }: ActionCellContentProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/types/lib/components/metadata-table/table-body/table-body-with-data.d.ts

@@ -2,10 +2,11 @@ import { TableProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
 import { VirtualItem } from '@tanstack/react-virtual';
 import { IconColumnVariant, Column } from '../../../types';
-import { MetadataTableProps } from '../metadata-table';
+import { MetadataTableProps, RenderActionCell } from '../metadata-table';
 import { InlineEditingCellProps } from './inline-editing-cell';
 interface TableBodyWithDataProps extends Omit<MetadataTableProps, keyof TableProps>, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     columnCount?: number;
+    renderActionCell?: RenderActionCell;
     shouldRenderActionColumn?: boolean;
     totalVirtualSize?: number;
     virtualItems?: VirtualItem[];
@@ -16,5 +17,5 @@ type CellProps = {
     iconColumnVariant: IconColumnVariant;
 };
 export type DataCellProps = CellProps & Pick<InlineEditingCellProps, 'onInlineEditChange'>;
-declare const TableBodyWithData: ({ areSelectionCheckboxesDisabled, columnCount, columns, dataTargetPrefix, iconColumnVariant, items, itemActionMenuProps, onInlineEditChange, onTableRowClick, shouldRenderActionColumn, virtualItems, totalVirtualSize, zoomLevel, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBodyWithData: ({ areSelectionCheckboxesDisabled, columnCount, columns, dataTargetPrefix, iconColumnVariant, items, itemActionMenuProps, onInlineEditChange, onTableRowClick, renderActionCell, shouldRenderActionColumn, virtualItems, totalVirtualSize, zoomLevel, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBodyWithData;

package/dist/types/lib/components/metadata-table/table-body/table-row/table-row.d.ts

@@ -8,7 +8,9 @@ export interface TableRowProps {
     item: Item;
     itemActionMenuProps: MetadataTableProps['itemActionMenuProps'];
     onTableRowClick: MetadataTableProps['onTableRowClick'];
+    /** Custom action cell renderer. When provided, replaces ItemActionMenu inside ActionCell. */
+    renderActionCell?: MetadataTableProps['renderActionCell'];
     shouldRenderActionColumn?: boolean;
     zoomLevel?: number;
 }
-export declare const TableRow: ({ areSelectionCheckboxesDisabled, columns, dataTargetPrefix, iconColumnVariant, item, itemActionMenuProps, onTableRowClick, shouldRenderActionColumn, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ areSelectionCheckboxesDisabled, columns, dataTargetPrefix, iconColumnVariant, item, itemActionMenuProps, onTableRowClick, renderActionCell, shouldRenderActionColumn, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/metadata-table/table-renderer.d.ts

@@ -3,6 +3,7 @@ import { useIntl } from 'react-intl';
 import { TableProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
+import { RenderActionCell } from './metadata-table';
 import { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     columns: Column[];
@@ -15,6 +16,8 @@ export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInli
     itemActionMenuProps?: MetadataProps['itemActionMenuProps'];
     items: MetadataProps['items'];
     onTableRowClick?: (item: Item) => void;
+    /** Custom action cell renderer. When provided, replaces ItemActionMenu inside ActionCell. */
+    renderActionCell?: RenderActionCell;
     style?: React.CSSProperties;
     tableHeader: React.ReactNode;
     tableProps: TableProps;
@@ -22,4 +25,4 @@ export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInli
     totalVirtualSize?: number;
     zoomLevel?: number;
 }
-export declare const TableRenderer: ({ columnCount: passedColumnCount, columns, dataTargetPrefix, formatMessage, iconColumnVariant, isLoading, areSelectionCheckboxesDisabled, itemActionMenuProps, items, onInlineEditChange, onTableRowClick, style, tableHeader, tableProps, virtualItems, totalVirtualSize, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRenderer: ({ columnCount: passedColumnCount, columns, dataTargetPrefix, formatMessage, iconColumnVariant, isLoading, areSelectionCheckboxesDisabled, itemActionMenuProps, items, onInlineEditChange, onTableRowClick, renderActionCell, style, tableHeader, tableProps, virtualItems, totalVirtualSize, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@box/metadata-view",
-    "version": "2.1.1",
+    "version": "2.2.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^16.1.1",
         "@box/blueprint-web-assets": "^5.1.1",
         "@box/box-item-type-selector": "^2.1.1",
         "@box/content-field": "^2.1.1",
-        "@box/item-icon": "^3.1.1",
-        "@box/metadata-filter": "^2.1.1",
+        "@box/item-icon": "^3.2.0",
+        "@box/metadata-filter": "^2.1.2",
         "@box/types": "3.1.1",
         "@tanstack/react-virtual": "^3.10.8",
         "formik": "^2.4.5",
@@ -24,8 +24,8 @@
         "@box/box-item-type-selector": "^2.1.1",
         "@box/content-field": "^2.1.1",
         "@box/eslint-plugin-blueprint": "2.1.1",
-        "@box/item-icon": "^3.1.1",
-        "@box/metadata-filter": "^2.1.1",
+        "@box/item-icon": "^3.2.0",
+        "@box/metadata-filter": "^2.1.2",
         "@box/storybook-utils": "1.1.1",
         "@box/types": "3.1.1",
         "@tanstack/react-virtual": "^3.10.8",