@box/metadata-view 1.57.6 → 1.58.0

package/dist/chunks/metadata-view.js

@@ -15,87 +15,89 @@ import '../styles/metadata-view.css';var y = {
 	container: "_container_1o9go_5",
 	contentContainer: "_contentContainer_1o9go_15"
 };
-function b({ actionBarProps: b, columns: x, tableProps: S, hasError: C, headerProps: w, onRefresh: T, onSelectionChange: E, onViewModeChange: D, selectedKeys: O, initialViewMode: k = e.LIST, paginationProps: A, isLoading: j, isSelectAllEnabled: M = !0, isSelectionEnabled: N, areSelectionCheckboxesDisabled: P, ...F }) {
-	let [I, L] = h(k), [R, z] = h(void 0), [B, V] = h(0), H = m(null), { headerSelectionProps: U, handleSelectionChange: W, selectionResetKey: G } = d({
-		headerProps: w,
-		items: F.items,
-		selectedKeys: O,
-		isSelectionEnabled: N,
-		onSelectionChange: E
-	}), K = () => {
-		L((t) => {
+function b({ actionBarProps: b, columns: x, dataTargetPrefix: S, tableProps: C, hasError: w, headerProps: T, onRefresh: E, onSelectionChange: D, onViewModeChange: O, selectedKeys: k, initialViewMode: A = e.LIST, paginationProps: j, isLoading: M, isSelectAllEnabled: N = !0, isSelectionEnabled: P, areSelectionCheckboxesDisabled: F, ...I }) {
+	let [L, R] = h(A), [z, B] = h(void 0), [V, H] = h(0), U = m(null), { headerSelectionProps: W, handleSelectionChange: G, selectionResetKey: K } = d({
+		headerProps: T,
+		items: I.items,
+		selectedKeys: k,
+		isSelectionEnabled: P,
+		onSelectionChange: D
+	}), q = () => {
+		R((t) => {
 			let n = t === e.LIST ? e.GRID : e.LIST;
-			return D?.(n), n;
+			return O?.(n), n;
 		});
-	}, q = !j && F.items.length === 0, J = b && b.sortDropdownProps && x.filter((e) => e.type !== "multiSelect" && e.type !== "enum" && e.allowsSorting === !0), { iconColumnVariant: Y } = S || {}, X = Y && Y === t.COLUMN, Z = S?.onSortChange, Q = p(({ column: e, direction: t }) => {
-		z({
+	}, J = !M && I.items.length === 0, Y = b && b.sortDropdownProps && x.filter((e) => e.type !== "multiSelect" && e.type !== "enum" && e.allowsSorting === !0), { iconColumnVariant: X } = C || {}, Z = X && X === t.COLUMN, Q = C?.onSortChange, $ = p(({ column: e, direction: t }) => {
+		B({
 			column: e,
 			direction: t
-		}), Z?.({
+		}), Q?.({
 			column: e,
 			direction: t
 		});
-	}, [Z]), $ = {
-		...S,
-		sortDescriptor: R,
-		onSortChange: Q
+	}, [Q]), ee = {
+		...C,
+		sortDescriptor: z,
+		onSortChange: $
 	};
 	return /* @__PURE__ */ _(f, { children: /* @__PURE__ */ _("div", {
-		ref: H,
+		ref: U,
 		className: y.container,
-		children: C ? /* @__PURE__ */ _(u, { onRefresh: T }) : /* @__PURE__ */ v(g, { children: [
-			w && /* @__PURE__ */ _(c, {
-				...w,
-				...U
+		children: w ? /* @__PURE__ */ _(u, { onRefresh: E }) : /* @__PURE__ */ v(g, { children: [
+			T && /* @__PURE__ */ _(c, {
+				...T,
+				...W
 			}),
 			/* @__PURE__ */ _(n, {
 				...b,
-				containerRef: H,
-				isIconColumnEnabled: X,
-				onSortDescriptorChange: z,
-				onViewModeClick: K,
-				onZoomLevelChange: V,
-				sortableColumns: J,
-				sortDescriptor: R,
-				viewMode: I,
-				zoomLevel: B
+				containerRef: U,
+				dataTargetPrefix: S,
+				isIconColumnEnabled: Z,
+				onSortDescriptorChange: B,
+				onViewModeClick: q,
+				onZoomLevelChange: H,
+				sortableColumns: Y,
+				sortDescriptor: z,
+				viewMode: L,
+				zoomLevel: V
 			}),
 			/* @__PURE__ */ _("div", {
 				className: y.contentContainer,
 				children: /* @__PURE__ */ v(s, { children: [
 					/* @__PURE__ */ _(o, {
-						condition: q,
+						condition: J,
 						children: /* @__PURE__ */ _(l, {})
 					}),
 					/* @__PURE__ */ _(o, {
-						condition: I === e.LIST,
+						condition: L === e.LIST,
 						children: /* @__PURE__ */ _(i, {
-							areSelectionCheckboxesDisabled: P,
+							areSelectionCheckboxesDisabled: F,
 							columns: x,
-							isLoading: j,
-							isSelectAllEnabled: M,
-							onSelectionChange: W,
-							selectedKeys: O,
-							selectionMode: N ? "multiple" : "none",
-							zoomLevel: B,
-							...F,
-							...$
-						}, G)
+							isLoading: M,
+							isSelectAllEnabled: N,
+							onSelectionChange: G,
+							selectedKeys: k,
+							selectionMode: P ? "multiple" : "none",
+							zoomLevel: V,
+							...I,
+							...ee,
+							dataTargetPrefix: S
+						}, K)
 					}),
 					/* @__PURE__ */ _(o, {
-						condition: I === e.GRID,
+						condition: L === e.GRID,
 						children: /* @__PURE__ */ _(r, {
-							areSelectionCheckboxesDisabled: P,
-							onSelectionChange: W,
-							selectedKeys: O,
-							selectionMode: N ? "multiple" : "none",
-							zoomLevel: B,
-							...F
-						}, G)
+							areSelectionCheckboxesDisabled: F,
+							onSelectionChange: G,
+							selectedKeys: k,
+							selectionMode: P ? "multiple" : "none",
+							zoomLevel: V,
+							...I
+						}, K)
 					})
 				] })
 			}),
-			A && /* @__PURE__ */ _(a, { ...A })
+			j && /* @__PURE__ */ _(a, { ...j })
 		] })
 	}) });
 }

package/dist/chunks/table-row.js

@@ -18,31 +18,32 @@ import '../styles/table-row.css';var f = {
 	tableNameCellText: "_tableNameCellText_1sntd_65",
 	tableNameCellIconInline: "_tableNameCellIconInline_1sntd_70",
 	iconCell: "_iconCell_1sntd_74"
-}, p = ({ areSelectionCheckboxesDisabled: p, columns: m, iconColumnVariant: h, item: g, itemActionMenuProps: _, onTableRowClick: v, shouldRenderActionColumn: y, zoomLevel: b = 0 }) => /* @__PURE__ */ c(a, {
-	className: u(f.tableRow, { [f.isClickable]: v }),
-	id: g.id,
-	onAction: () => v?.(g),
+}, 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?.(_),
 	children: [
-		h === e.COLUMN ? /* @__PURE__ */ s(i, {
-			style: { height: n[b] },
+		g === e.COLUMN ? /* @__PURE__ */ s(i, {
+			style: { height: n[x] },
 			children: /* @__PURE__ */ s(l, {
 				className: f.iconCell,
-				item: g
+				item: _
 			})
-		}, `item-type-icon-${g.id}`) : null,
+		}, `item-type-icon-${_.id}`) : null,
 		m.map((t) => {
-			let { cellRenderer: n, id: r, isItemMetadata: a, subtitle: p, textValue: m, type: _ } = t, v = `${m}-${g.id}`;
-			if (n) return /* @__PURE__ */ s(i, { children: n(g, t) }, v);
-			let y = d(g, a ? r.split(".")[1] : r);
-			if (r === "name" && (h === e.INLINE || h === e.INLINE_SUBTITLE)) return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ c("div", {
+			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: g }), /* @__PURE__ */ c("div", {
-					className: u(f.tableNameCellTitle, { [f.hasSubtitle]: h === e.INLINE_SUBTITLE }),
+				children: [/* @__PURE__ */ s(l, { item: _ }), /* @__PURE__ */ c("div", {
+					className: u(f.tableNameCellTitle, { [f.hasSubtitle]: g === e.INLINE_SUBTITLE }),
 					children: [/* @__PURE__ */ s(o, {
 						as: "span",
 						className: f.tableNameCellText,
 						children: y
-					}), h === e.INLINE_SUBTITLE ? /* @__PURE__ */ s(o, {
+					}), g === e.INLINE_SUBTITLE ? /* @__PURE__ */ s(o, {
 						as: "span",
 						className: f.tableNameCellText,
 						color: "textOnLightSecondary",
@@ -50,8 +51,8 @@ import '../styles/table-row.css';var f = {
 					}) : null]
 				})]
 			}) }, v);
-			if (_ === "multiSelect") {
-				let e = d(g, r);
+			if (h === "multiSelect") {
+				let e = d(_, r);
 				return /* @__PURE__ */ s(i, { children: e ? e.join(" ") : "" }, v);
 			}
 			return /* @__PURE__ */ s(i, { children: /* @__PURE__ */ s(o, {
@@ -59,14 +60,14 @@ import '../styles/table-row.css';var f = {
 				children: y
 			}) }, v);
 		}),
-		y && /* @__PURE__ */ s(r, {
+		b && /* @__PURE__ */ s(r, {
 			isCheckboxDisabled: p,
-			children: (e) => _ ? /* @__PURE__ */ s(t, {
-				..._,
-				item: g,
+			children: (e) => v ? /* @__PURE__ */ s(t, {
+				...v,
+				item: _,
 				onOpenChange: e
 			}) : null
 		})
 	]
-}, g.id);
+}, _.id);
 export { f as n, p as t };

package/dist/esm/lib/components/filter-row/all-filters-chip.js

@@ -9,24 +9,25 @@ import { useIntl as c } from "react-intl";
 import { useFormikContext as l } from "formik";
 import { Filter as u } from "@box/blueprint-web-assets/icons/Line";
 import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-var m = ({ containerRef: m, filterGroups: h, onAllFiltersClick: g }) => {
-	let { formatMessage: _ } = c(), { values: v } = l(), [y, b] = s(!1), x = () => g ? g() : b(!0), S = o(() => Object.values(v.metadata.fields).filter((e) => n(e.value)).length, [v.metadata.fields]);
-	return /* @__PURE__ */ p(d, { children: [y && /* @__PURE__ */ f(e, {
+var m = ({ containerRef: m, dataTargetPrefix: h, filterGroups: g, onAllFiltersClick: _ }) => {
+	let { formatMessage: v } = c(), { values: y } = l(), [b, x] = s(!1), S = () => _ ? _() : x(!0), C = o(() => Object.values(y.metadata.fields).filter((e) => n(e.value)).length, [y.metadata.fields]);
+	return /* @__PURE__ */ p(d, { children: [b && /* @__PURE__ */ f(e, {
 		containerRef: m,
-		filterGroups: h,
-		getInitialFormValues: () => t(h.flatMap(({ filters: e }) => e)),
-		isOpen: y,
-		onIsOpenChange: b
+		filterGroups: g,
+		getInitialFormValues: () => t(g.flatMap(({ filters: e }) => e)),
+		isOpen: b,
+		onIsOpenChange: x
 	}), /* @__PURE__ */ p(a.ChipButton, {
-		onClick: x,
+		"data-target-id": h ? `${h}-allFilters` : void 0,
+		onClick: S,
 		value: "all-filters-chip-btn",
 		children: [
 			/* @__PURE__ */ f(a.Icon, {
 				className: i.filterChipIcon,
 				icon: u
 			}),
-			/* @__PURE__ */ f(a.Label, { children: _(r.allFilters) }),
-			S > 0 ? /* @__PURE__ */ f(a.Status, { children: S.toString() }) : null
+			/* @__PURE__ */ f(a.Label, { children: v(r.allFilters) }),
+			C > 0 ? /* @__PURE__ */ f(a.Status, { children: C.toString() }) : null
 		]
 	})] });
 };

package/dist/esm/lib/components/filter-row/filter-row.js

@@ -7,27 +7,28 @@ import { FilterChip as a } from "@box/blueprint-web";
 import { useMemo as o, useRef as s } from "react";
 import { Form as c, Formik as l } from "formik";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-var f = ({ predefinedFilterOptions: f, containerRef: p, filterGroups: m = [], initialFilterValues: h, isAllFiltersDisabled: g, onAllFiltersClick: _, onFilterSubmit: v }) => {
-	let y = i(f), b = ({ metadata: { fields: e } }) => {
-		v && v(e);
-	}, x = [...y, ...m], S = x.flatMap(({ filters: e }) => e).sort((e, t) => (e.position ?? 0) - (t.position ?? 0)), C = o(() => e(S, h), [S.map((e) => `${e.id}:${e.fieldType}`).sort().join("|"), h]), w = s(null);
+var f = ({ dataTargetPrefix: f, predefinedFilterOptions: p, containerRef: m, filterGroups: h = [], initialFilterValues: g, isAllFiltersDisabled: _, onAllFiltersClick: v, onFilterSubmit: y }) => {
+	let b = i(p), x = ({ metadata: { fields: e } }) => {
+		y && y(e);
+	}, S = [...b, ...h], C = S.flatMap(({ filters: e }) => e).sort((e, t) => (e.position ?? 0) - (t.position ?? 0)), w = o(() => e(C, g), [C.map((e) => `${e.id}:${e.fieldType}`).sort().join("|"), g]), T = s(null);
 	return /* @__PURE__ */ u(l, {
 		enableReinitialize: !0,
-		initialValues: C,
-		onSubmit: b,
+		initialValues: w,
+		onSubmit: x,
 		children: /* @__PURE__ */ u(c, {
-			ref: w,
+			ref: T,
 			children: /* @__PURE__ */ d(a.Group, {
 				className: t.filterChipGroup,
 				name: "metadata-view-filters",
 				type: "multiple",
-				children: [g ? null : /* @__PURE__ */ u(n, {
-					containerRef: p,
-					filterGroups: x,
-					onAllFiltersClick: _
-				}), S.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ u(r, {
+				children: [_ ? null : /* @__PURE__ */ u(n, {
+					containerRef: m,
+					dataTargetPrefix: f,
+					filterGroups: S,
+					onAllFiltersClick: v
+				}), C.filter((e) => e.shouldRenderChip).map((e) => /* @__PURE__ */ u(r, {
 					filterOption: e,
-					formRef: w
+					formRef: T
 				}, e.id))]
 			})
 		})

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

@@ -9,19 +9,19 @@ 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: _, hasNextPage: v = !1, iconColumnVariant: y, isInfiniteScrollEnabled: b = !1, isLoading: x = !1, isSelectAllEnabled: S, itemActionMenuProps: C, items: w, maxActionColumnWidth: T, minActionColumnWidth: E, onGetNextPage: D, onInlineEditChange: O, onTableRowClick: k, placeholderRowsCount: A, zoomLevel: j, ...M }) => {
-	let { formatMessage: N } = p(), P = f(null), { virtualItemsToDisplay: F, totalVirtualSize: I } = n({
-		items: w,
-		hasNextPage: v,
-		isLoading: x,
-		parentRef: P,
-		onGetNextPage: D,
-		placeholderRowsCount: A
-	}), L = [];
-	if (y === e.COLUMN) {
-		j ||= 0;
-		let e = parseInt(t[j], 10) + 24;
-		L.push({
+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({
+		items: T,
+		hasNextPage: y,
+		isLoading: S,
+		parentRef: F,
+		onGetNextPage: O,
+		placeholderRowsCount: j
+	}), R = [];
+	if (b === e.COLUMN) {
+		M ||= 0;
+		let e = parseInt(t[M], 10) + 24;
+		R.push({
 			id: "item-type-icon",
 			isRowHeader: !1,
 			hideHeader: !1,
@@ -29,7 +29,7 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, hasNextPage: v =
 			maxWidth: e
 		});
 	}
-	let R = _.map((e) => {
+	let z = _.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,48 +43,49 @@ var g = ({ areSelectionCheckboxesDisabled: g = !1, columns: _, hasNextPage: v =
 			allowsSorting: c
 		};
 	});
-	L.push(...R), a(M) && L.push({
+	R.push(...z), a(N) && R.push({
 		id: "actions",
 		className: i.tableHeaderActions,
 		children: /* @__PURE__ */ h("div", {
 			className: i.tableHeaderActionsWrapper,
-			children: [M.HeaderActions, S ? /* @__PURE__ */ m(l, {
-				"aria-label": N(r.selectAll),
+			children: [N.HeaderActions, C ? /* @__PURE__ */ m(l, {
+				"aria-label": P(r.selectAll),
 				className: i.selectAllCheckbox,
-				isDisabled: x || g
+				isDisabled: S || g
 			}) : null]
 		}),
 		isRowHeader: !1,
 		hideHeader: !1,
 		allowsSorting: !1,
-		maxWidth: T,
-		minWidth: E
+		maxWidth: E,
+		minWidth: D
 	});
-	let z = /* @__PURE__ */ m(u, {
-		columns: L,
+	let B = /* @__PURE__ */ m(u, {
+		columns: R,
 		children: (e) => /* @__PURE__ */ m(s, { ...e })
-	}), B = {
-		columnCount: L.length,
+	}), V = {
+		columnCount: R.length,
 		columns: _,
-		formatMessage: N,
-		iconColumnVariant: y,
-		isLoading: x,
+		dataTargetPrefix: v,
+		formatMessage: P,
+		iconColumnVariant: b,
+		isLoading: S,
 		areSelectionCheckboxesDisabled: g,
-		itemActionMenuProps: C,
-		items: w,
-		onInlineEditChange: O,
-		onTableRowClick: k,
-		tableHeader: z,
-		tableProps: M,
-		zoomLevel: j
+		itemActionMenuProps: w,
+		items: T,
+		onInlineEditChange: k,
+		onTableRowClick: A,
+		tableHeader: B,
+		tableProps: N,
+		zoomLevel: M
 	};
-	return b ? /* @__PURE__ */ m(c, {
-		ref: P,
+	return x ? /* @__PURE__ */ m(c, {
+		ref: F,
 		children: /* @__PURE__ */ m(o, {
-			...B,
-			totalVirtualSize: I,
-			virtualItems: F
+			...V,
+			totalVirtualSize: L,
+			virtualItems: I
 		})
-	}) : /* @__PURE__ */ m(o, { ...B });
+	}) : /* @__PURE__ */ m(o, { ...V });
 };
 export { g as MetadataTable };

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

@@ -73,61 +73,63 @@ var v = (e, t, n) => _(e, n ? t.split(".")[1] : t), y = /* @__PURE__ */ f.memo((
 		item: e,
 		onOpenChange: r
 	}) : null
-})), E = ({ areSelectionCheckboxesDisabled: t, columnCount: n, columns: i, iconColumnVariant: s, items: c, itemActionMenuProps: d, onInlineEditChange: f, onTableRowClick: h, shouldRenderActionColumn: _, virtualItems: v, totalVirtualSize: y, zoomLevel: b }) => {
-	let x = s === e.COLUMN;
-	if (v) {
+})), 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,
 			rowKey: `ghost-${e}`
 		}), a = (e) => /* @__PURE__ */ p(o, {
 			areSelectionCheckboxesDisabled: t,
 			columns: i,
-			iconColumnVariant: s,
+			dataTargetPrefix: s,
+			iconColumnVariant: c,
 			item: e,
-			itemActionMenuProps: d,
-			onTableRowClick: h,
-			shouldRenderActionColumn: _,
-			zoomLevel: b
-		}), f = () => v[0]?.start || 0, g = () => {
-			let e = v[v.length - 1]?.end || 0;
-			return Math.max((y || 0) - e, 0);
-		}, x = f(), S = g();
+			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: [
-			!!x && /* @__PURE__ */ p(l, {
-				isDisabled: !0,
-				style: { height: `${x}px` }
-			}),
-			v.map(({ index: t }) => t >= c.length ? e(t) : a(c[t])),
 			!!S && /* @__PURE__ */ p(l, {
 				isDisabled: !0,
 				style: { height: `${S}px` }
+			}),
+			y.map(({ index: t }) => t >= d.length ? e(t) : a(d[t])),
+			!!C && /* @__PURE__ */ p(l, {
+				isDisabled: !0,
+				style: { height: `${C}px` }
 			})
 		] });
 	}
 	return /* @__PURE__ */ p(u, {
-		items: c.map((e) => ({
+		items: d.map((e) => ({
 			key: e.id,
 			...e
 		})),
 		children: (e) => /* @__PURE__ */ m(l, {
-			className: g(a.tableRow, { [a.isClickable]: h }),
+			className: g(a.tableRow, { [a.isClickable]: _ }),
+			"data-target-id": s ? `${s}-itemRow-${e.id}` : void 0,
 			id: e.id,
-			onAction: () => h?.(e),
+			onAction: () => _?.(e),
 			children: [
-				x && /* @__PURE__ */ p(w, {
+				S && /* @__PURE__ */ p(w, {
 					item: e,
-					zoomLevel: b
+					zoomLevel: x
 				}),
 				i.map((t) => /* @__PURE__ */ p(C, {
 					column: t,
-					iconColumnVariant: s,
+					iconColumnVariant: c,
 					item: e,
-					onInlineEditChange: f
+					onInlineEditChange: h
 				}, `${t.textValue}-${e.id}`)),
-				_ && /* @__PURE__ */ p(T, {
+				v && /* @__PURE__ */ p(T, {
 					isCheckboxDisabled: t,
 					item: e,
-					itemActionMenuProps: d
+					itemActionMenuProps: f
 				})
 			]
 		}, e.id)

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

@@ -5,30 +5,31 @@ 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, formatMessage: u, iconColumnVariant: d, isLoading: f, areSelectionCheckboxesDisabled: p, itemActionMenuProps: m, items: h, onInlineEditChange: g, onTableRowClick: _, style: v, tableHeader: y, tableProps: b, virtualItems: x, totalVirtualSize: S, zoomLevel: C }) => {
-	let w = i(b), T = c || (() => {
+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 || (() => {
 		let t = l.length;
-		return d === e.COLUMN && (t += 1), w && (t += 1), t;
-	})(), E = f && !x?.length;
+		return f === e.COLUMN && (t += 1), T && (t += 1), t;
+	})(), D = p && !S?.length;
 	return /* @__PURE__ */ s(a, {
-		"aria-label": u(n.listView),
+		"aria-label": d(n.listView),
 		selectionBehavior: "toggle",
-		style: v,
-		...b,
-		children: [y, E ? /* @__PURE__ */ o(t, { columnLength: T }) : /* @__PURE__ */ o(r, {
-			areSelectionCheckboxesDisabled: p,
-			columnCount: T,
+		style: y,
+		...x,
+		children: [b, D ? /* @__PURE__ */ o(t, { columnLength: E }) : /* @__PURE__ */ o(r, {
+			areSelectionCheckboxesDisabled: m,
+			columnCount: E,
 			columns: l,
-			iconColumnVariant: d,
-			isLoading: f,
-			itemActionMenuProps: m,
-			items: h,
-			onInlineEditChange: g,
-			onTableRowClick: _,
-			shouldRenderActionColumn: w,
-			totalVirtualSize: S,
-			virtualItems: x,
-			zoomLevel: C
+			dataTargetPrefix: u,
+			iconColumnVariant: f,
+			isLoading: p,
+			itemActionMenuProps: h,
+			items: g,
+			onInlineEditChange: _,
+			onTableRowClick: v,
+			shouldRenderActionColumn: T,
+			totalVirtualSize: C,
+			virtualItems: S,
+			zoomLevel: w
 		})]
 	});
 };

package/dist/types/lib/components/filter-row/all-filters-chip.d.ts

@@ -1,8 +1,9 @@
 import { FilterGroup } from './types';
 type AllFiltersChipProps = {
     containerRef?: React.RefObject<HTMLElement>;
+    dataTargetPrefix?: string;
     filterGroups: Array<FilterGroup>;
     onAllFiltersClick?: () => void;
 };
-declare const AllFiltersChip: ({ containerRef, filterGroups, onAllFiltersClick }: AllFiltersChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const AllFiltersChip: ({ containerRef, dataTargetPrefix, filterGroups, onAllFiltersClick }: AllFiltersChipProps) => import("react/jsx-runtime").JSX.Element;
 export default AllFiltersChip;

package/dist/types/lib/components/filter-row/filter-row.d.ts

@@ -1,6 +1,7 @@
 import { PredefinedFilterOptions } from './predefinedFilters/types';
 import { FilterGroup, FilterValues, InitialFilterValues } from './types';
 export interface FilterRowProps {
+    dataTargetPrefix?: string;
     predefinedFilterOptions?: Partial<PredefinedFilterOptions>;
     containerRef?: React.RefObject<HTMLElement>;
     filterGroups?: Array<FilterGroup>;
@@ -9,4 +10,4 @@ export interface FilterRowProps {
     onAllFiltersClick?: () => void;
     onFilterSubmit?: (fields: FilterValues) => void;
 }
-export declare const FilterRow: ({ predefinedFilterOptions, containerRef, filterGroups: customFilterGroups, initialFilterValues: customFilterValues, isAllFiltersDisabled, onAllFiltersClick, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterRow: ({ dataTargetPrefix, predefinedFilterOptions, containerRef, filterGroups: customFilterGroups, initialFilterValues: customFilterValues, isAllFiltersDisabled, onAllFiltersClick, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -5,6 +5,7 @@ import { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export interface MetadataTableProps extends TableProps, MetadataProps, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     areSelectionCheckboxesDisabled?: boolean;
     columns: Column[];
+    dataTargetPrefix?: string;
     hasNextPage?: boolean;
     HeaderActions?: React.ReactElement;
     iconColumnVariant?: IconColumnVariant;
@@ -17,4 +18,4 @@ export interface MetadataTableProps extends TableProps, MetadataProps, Pick<Inli
     placeholderRowsCount?: number;
     zoomLevel?: number;
 }
-export declare const MetadataTable: ({ areSelectionCheckboxesDisabled, columns, 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, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -16,5 +16,5 @@ type CellProps = {
     iconColumnVariant: IconColumnVariant;
 };
 export type DataCellProps = CellProps & Pick<InlineEditingCellProps, 'onInlineEditChange'>;
-declare const TableBodyWithData: ({ areSelectionCheckboxesDisabled, columnCount, columns, 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, 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

@@ -3,6 +3,7 @@ import { MetadataTableProps } from '../../metadata-table';
 export interface TableRowProps {
     areSelectionCheckboxesDisabled?: MetadataTableProps['areSelectionCheckboxesDisabled'];
     columns: MetadataTableProps['columns'];
+    dataTargetPrefix?: MetadataTableProps['dataTargetPrefix'];
     iconColumnVariant: MetadataTableProps['iconColumnVariant'];
     item: Item;
     itemActionMenuProps: MetadataTableProps['itemActionMenuProps'];
@@ -10,4 +11,4 @@ export interface TableRowProps {
     shouldRenderActionColumn?: boolean;
     zoomLevel?: number;
 }
-export declare const TableRow: ({ areSelectionCheckboxesDisabled, columns, iconColumnVariant, item, itemActionMenuProps, onTableRowClick, shouldRenderActionColumn, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ areSelectionCheckboxesDisabled, columns, dataTargetPrefix, iconColumnVariant, item, itemActionMenuProps, onTableRowClick, shouldRenderActionColumn, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -7,6 +7,7 @@ import { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     columns: Column[];
     columnCount?: number;
+    dataTargetPrefix?: string;
     formatMessage: ReturnType<typeof useIntl>['formatMessage'];
     iconColumnVariant?: IconColumnVariant;
     isLoading?: boolean;
@@ -21,4 +22,4 @@ export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInli
     totalVirtualSize?: number;
     zoomLevel?: number;
 }
-export declare const TableRenderer: ({ columnCount: passedColumnCount, columns, 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, style, tableHeader, tableProps, virtualItems, totalVirtualSize, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/metadata-view.d.ts

@@ -1,3 +1,3 @@
 import { MetadataViewProps } from './types';
-export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, headerProps, onRefresh, onSelectionChange, onViewModeChange, selectedKeys, initialViewMode, paginationProps, isLoading, isSelectAllEnabled, isSelectionEnabled, areSelectionCheckboxesDisabled, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataView({ actionBarProps, columns, dataTargetPrefix, tableProps, hasError, headerProps, onRefresh, onSelectionChange, onViewModeChange, selectedKeys, initialViewMode, paginationProps, isLoading, isSelectAllEnabled, isSelectionEnabled, areSelectionCheckboxesDisabled, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataView;

package/dist/types/lib/types.d.ts

@@ -60,7 +60,8 @@ export declare enum ViewMode {
     LIST = "list"
 }
 export interface MetadataViewProps extends MetadataProps {
-    actionBarProps?: Omit<ActionBarProps, 'onViewModeClick' | 'onZoomLevelChange' | 'viewMode'>;
+    actionBarProps?: Omit<ActionBarProps, 'dataTargetPrefix' | 'onViewModeClick' | 'onZoomLevelChange' | 'viewMode'>;
+    dataTargetPrefix?: string;
     columns: Column[];
     hasError?: boolean;
     initialViewMode?: ViewMode;
@@ -71,7 +72,7 @@ export interface MetadataViewProps extends MetadataProps {
     isSelectAllEnabled?: boolean;
     isSelectionEnabled?: boolean;
     areSelectionCheckboxesDisabled?: boolean;
-    tableProps?: Omit<MetadataTableProps, 'columns' | 'isSelectAllEnabled' | 'items' | 'itemActionMenuProps' | 'onSelectionChange' | 'selectedKeys'>;
+    tableProps?: Omit<MetadataTableProps, 'columns' | 'dataTargetPrefix' | 'isSelectAllEnabled' | 'items' | 'itemActionMenuProps' | 'onSelectionChange' | 'selectedKeys'>;
     paginationProps?: PaginationProps;
     headerProps?: HeaderProps;
 }

package/package.json

@@ -1,14 +1,14 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.57.6",
+    "version": "1.58.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^14.30.2",
-        "@box/blueprint-web-assets": "^4.118.0",
-        "@box/box-item-type-selector": "^1.41.6",
-        "@box/content-field": "^1.42.6",
-        "@box/item-icon": "^2.35.6",
-        "@box/metadata-filter": "^1.83.6",
+        "@box/blueprint-web": "^14.30.4",
+        "@box/blueprint-web-assets": "^4.118.2",
+        "@box/box-item-type-selector": "^1.41.8",
+        "@box/content-field": "^1.42.8",
+        "@box/item-icon": "^2.35.8",
+        "@box/metadata-filter": "^1.83.8",
         "@box/types": "2.2.1",
         "@tanstack/react-virtual": "^3.10.8",
         "formik": "^2.4.5",
@@ -19,14 +19,14 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^14.30.2",
-        "@box/blueprint-web-assets": "^4.118.0",
-        "@box/box-item-type-selector": "^1.41.6",
-        "@box/content-field": "^1.42.6",
+        "@box/blueprint-web": "^14.30.4",
+        "@box/blueprint-web-assets": "^4.118.2",
+        "@box/box-item-type-selector": "^1.41.8",
+        "@box/content-field": "^1.42.8",
         "@box/eslint-plugin-blueprint": "1.2.1",
-        "@box/item-icon": "^2.35.6",
-        "@box/metadata-filter": "^1.83.6",
-        "@box/storybook-utils": "0.19.4",
+        "@box/item-icon": "^2.35.8",
+        "@box/metadata-filter": "^1.83.8",
+        "@box/storybook-utils": "0.19.6",
         "@box/types": "2.2.1",
         "@tanstack/react-virtual": "^3.10.8",
         "react-intl": "^6.4.2"