@box/metadata-view 1.1.0 → 1.2.1

package/dist/chunks/index.js

@@ -1,51 +1,53 @@
-import { Row as L, Cell as n, Text as r, ActionCell as E } from "@box/blueprint-web";
+import { Row as E, Cell as n, Text as r, ActionCell as y } from "@box/blueprint-web";
 import I from "lodash/get";
 import { ItemTypeIcon as C } from "@box/item-icon";
-import y from "clsx";
+import R from "clsx";
 import { I as o } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as R } from "../esm/lib/components/constants.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as g } from "../esm/lib/components/constants.js";
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { ItemActionMenu as g } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k = "_tableHeaderActions_1a999_1", U = "_tableRow_1a999_33", B = "_selectAllCheckbox_1a999_42", W = "_tableNameCell_1a999_47", j = "_tableNameCellTitle_1a999_53", F = "_hasSubtitle_1a999_57", M = "_tableNameCellText_1a999_62", $ = "_tableNameCellIconInline_1a999_67", v = "_infiniteScrollTableContainerFullHeight_1a999_71", O = "_iconCell_1a999_77", t = {
-  tableHeaderActionsWrapper: w,
-  tableHeaderActions: k,
-  tableRow: U,
-  selectAllCheckbox: B,
-  tableNameCell: W,
-  tableNameCellTitle: j,
-  hasSubtitle: F,
-  tableNameCellText: M,
-  tableNameCellIconInline: $,
-  infiniteScrollTableContainerFullHeight: v,
-  iconCell: O
-}, Y = ({
-  item: l,
-  columns: h,
+import { ItemActionMenu as w } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/index.css';const k = "_tableHeaderActionsWrapper_1a999_1", U = "_tableHeaderActions_1a999_1", B = "_tableRow_1a999_33", W = "_selectAllCheckbox_1a999_42", j = "_tableNameCell_1a999_47", F = "_tableNameCellTitle_1a999_53", M = "_hasSubtitle_1a999_57", $ = "_tableNameCellText_1a999_62", v = "_tableNameCellIconInline_1a999_67", O = "_infiniteScrollTableContainerFullHeight_1a999_71", D = "_iconCell_1a999_77", t = {
+  tableHeaderActionsWrapper: k,
+  tableHeaderActions: U,
+  tableRow: B,
+  selectAllCheckbox: W,
+  tableNameCell: j,
+  tableNameCellTitle: F,
+  hasSubtitle: M,
+  tableNameCellText: $,
+  tableNameCellIconInline: v,
+  infiniteScrollTableContainerFullHeight: O,
+  iconCell: D
+}, Z = ({
+  areSelectionCheckboxesDisabled: h,
+  columns: T,
   iconColumnVariant: a,
-  isSelectAllEnabled: T,
+  isSelectAllEnabled: p,
+  item: l,
   itemActionMenuProps: _,
-  areSelectionCheckboxesDisabled: p,
-  zoomLevel: u = 0
-}) => /* @__PURE__ */ b(L, {
+  onTableRowClick: u,
+  zoomLevel: x = 0
+}) => /* @__PURE__ */ b(E, {
   className: t.tableRow,
   id: l.id,
+  onAction: () => u(l),
   children: [a === o.COLUMN ? /* @__PURE__ */ e(n, {
     style: {
-      height: R[u]
+      height: g[x]
     },
     children: /* @__PURE__ */ e(C, {
       className: t.iconCell,
       item: l
     })
-  }, `item-type-icon-${l.id}`) : null, h.map((c) => {
+  }, `item-type-icon-${l.id}`) : null, T.map((c) => {
     const {
       cellRenderer: d,
       id: s,
-      isItemMetadata: x,
-      subtitle: f,
-      textValue: S,
+      isItemMetadata: f,
+      subtitle: S,
+      textValue: A,
       type: H
-    } = c, i = `${S}-${l.id}`, A = x ? s.split(".")[1] : s, m = I(l, A);
+    } = c, i = `${A}-${l.id}`, L = f ? s.split(".")[1] : s, m = I(l, L);
     if (s === "name" && (a === o.INLINE || a === o.INLINE_SUBTITLE))
       return /* @__PURE__ */ e(n, {
         children: /* @__PURE__ */ b("div", {
@@ -53,7 +55,7 @@ import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k =
           children: [/* @__PURE__ */ e(C, {
             item: l
           }), /* @__PURE__ */ b("div", {
-            className: y(t.tableNameCellTitle, {
+            className: R(t.tableNameCellTitle, {
               [t.hasSubtitle]: a === o.INLINE_SUBTITLE
             }),
             children: [/* @__PURE__ */ e(r, {
@@ -64,7 +66,7 @@ import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k =
               as: "span",
               className: t.tableNameCellText,
               color: "textOnLightSecondary",
-              children: f
+              children: S
             }) : null]
           })]
         })
@@ -85,9 +87,9 @@ import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k =
         children: m
       })
     }, i);
-  }), T && /* @__PURE__ */ e(E, {
-    isCheckboxDisabled: p,
-    children: (c) => _ ? /* @__PURE__ */ e(g, {
+  }), p && /* @__PURE__ */ e(y, {
+    isCheckboxDisabled: h,
+    children: (c) => _ ? /* @__PURE__ */ e(w, {
       ..._,
       item: l,
       onOpenChange: c
@@ -95,6 +97,6 @@ import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k =
   })]
 }, l.id);
 export {
-  Y as T,
+  Z as T,
   t as s
 };

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

@@ -1,48 +1,50 @@
-import { useRef as E } from "react";
-import { useIntl as B } from "react-intl";
-import { Text as O, ListCheckbox as P, TableHeader as U, Column as j } from "@box/blueprint-web";
-import { useInfiniteScrollTableItems as k } from "./hooks/useInfiniteScrollTableItems.js";
+import { useRef as B } from "react";
+import { useIntl as O } from "react-intl";
+import { Text as P, ListCheckbox as U, TableHeader as j, Column as k } from "@box/blueprint-web";
+import F from "lodash/noop";
+import { useInfiniteScrollTableItems as G } from "./hooks/useInfiniteScrollTableItems.js";
 import { TableRenderer as R } from "./table-renderer.js";
-import { I as F } from "../../../../chunks/types.js";
-import { THUMBNAIL_WIDTHS as G } from "../constants.js";
+import { I as L } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as V } from "../constants.js";
 import { s } from "../../../../chunks/index.js";
-import L from "./messages.js";
+import X from "./messages.js";
 import { jsx as e } from "react/jsx-runtime";
 import "./table-body/inline-editing-cell/inline-editing-cell.js";
-const V = 40, ae = ({
-  columns: o,
-  isLoading: l = !1,
-  iconColumnVariant: n,
-  isSelectAllEnabled: m,
-  items: d,
-  itemActionMenuProps: w,
+const Y = 40, le = ({
+  areSelectionCheckboxesDisabled: i = !1,
+  columns: n,
+  hasNextPage: w = !1,
+  iconColumnVariant: m,
   isInfiniteScrollEnabled: x = !1,
-  areSelectionCheckboxesDisabled: c = !1,
-  hasNextPage: g = !1,
-  onInlineEditChange: y,
-  onGetNextPage: W,
-  placeholderRowsCount: A,
-  zoomLevel: r,
-  ...C
+  isLoading: l = !1,
+  isSelectAllEnabled: d,
+  itemActionMenuProps: g,
+  items: c,
+  onGetNextPage: y,
+  onInlineEditChange: W,
+  onTableRowClick: A = F,
+  placeholderRowsCount: C,
+  zoomLevel: a,
+  ...N
 }) => {
   var H;
   const {
     formatMessage: f
-  } = B(), p = E(null), {
+  } = O(), p = B(null), {
     virtualItemsToDisplay: h,
-    getTableHeight: N
-  } = k({
-    items: d,
-    hasNextPage: g,
+    getTableHeight: _
+  } = G({
+    items: c,
+    hasNextPage: w,
     isLoading: l,
     parentRef: p,
-    onGetNextPage: W,
-    placeholderRowsCount: A
-  }), a = [], _ = 0;
-  if (n === F.COLUMN) {
-    r = r || _;
-    const t = parseInt(G[r], 10) + 24;
-    a.push({
+    onGetNextPage: y,
+    placeholderRowsCount: C
+  }), r = [], v = 0;
+  if (m === L.COLUMN) {
+    a = a || v;
+    const t = parseInt(V[a], 10) + 24;
+    r.push({
       id: "item-type-icon",
       isRowHeader: !1,
       hideHeader: !1,
@@ -50,61 +52,62 @@ const V = 40, ae = ({
       maxWidth: t
     });
   }
-  const v = o.map((t) => {
+  const D = n.map((t) => {
     const {
       id: b,
-      isRowHeader: M,
+      isRowHeader: S,
       headerRenderer: T,
-      textValue: i,
+      textValue: o,
       type: I,
-      ...S
+      ...E
     } = t;
     return {
-      ...S,
-      children: T ? T(i, t) : /* @__PURE__ */ e(O, {
+      ...E,
+      children: T ? T(o, t) : /* @__PURE__ */ e(P, {
         as: "span",
-        children: i
+        children: o
       }),
-      isRowHeader: b === "name" || M,
+      isRowHeader: b === "name" || S,
       id: b,
-      textValue: i,
+      textValue: o,
       allowsSorting: I !== "multiSelect" && I !== "enum"
     };
   });
-  a.push(...v), m && a.push({
+  r.push(...D), d && r.push({
     id: "actions",
     className: s.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
       className: s.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(P, {
-        "aria-label": f(L.selectAll),
+      children: /* @__PURE__ */ e(U, {
+        "aria-label": f(X.selectAll),
         className: s.selectAllCheckbox,
-        isDisabled: l || c
+        isDisabled: l || i
       })
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1
   });
-  const D = /* @__PURE__ */ e(U, {
-    columns: a,
-    children: (t) => /* @__PURE__ */ e(j, {
+  const M = /* @__PURE__ */ e(j, {
+    columns: r,
+    children: (t) => /* @__PURE__ */ e(k, {
       ...t
     })
   }), u = {
-    columnCount: a.length,
-    columns: o,
+    columnCount: r.length,
+    columns: n,
     formatMessage: f,
-    iconColumnVariant: n,
+    iconColumnVariant: m,
     isLoading: l,
-    isSelectAllEnabled: m,
-    areSelectionCheckboxesDisabled: c,
-    itemActionMenuProps: w,
-    items: d,
-    onInlineEditChange: y,
-    tableHeader: D,
-    tableProps: C,
-    zoomLevel: r
+    isSelectAllEnabled: d,
+    areSelectionCheckboxesDisabled: i,
+    itemActionMenuProps: g,
+    items: c,
+    onInlineEditChange: W,
+    onTableRowClick: A,
+    tableHeader: M,
+    tableProps: N,
+    zoomLevel: a
   };
   return x ? /* @__PURE__ */ e("div", {
     ref: p,
@@ -113,7 +116,7 @@ const V = 40, ae = ({
       style: {
         position: "relative",
         width: "100%",
-        height: N() + V
+        height: _() + Y
       },
       children: /* @__PURE__ */ e(R, {
         ...u,
@@ -133,5 +136,5 @@ const V = 40, ae = ({
   });
 };
 export {
-  ae as MetadataTable
+  le as MetadataTable
 };

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

@@ -1,193 +1,196 @@
-import { TableBody as C, Row as L, Cell as h, ActionCell as g, Text as u } from "@box/blueprint-web";
-import { ItemTypeIcon as y } from "@box/item-icon";
+import { TableBody as $, Row as g, Cell as h, ActionCell as S, Text as u } from "@box/blueprint-web";
+import { ItemTypeIcon as b } from "@box/item-icon";
 import R from "clsx";
-import $ from "lodash/get";
+import x from "lodash/get";
 import I from "react";
 import { I as N } from "../../../../../chunks/types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as S } from "../../constants.js";
-import { s as i, T as w } from "../../../../../chunks/index.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as w } from "../../constants.js";
+import { s as i, T as B } from "../../../../../chunks/index.js";
 import { jsx as l, jsxs as T } from "react/jsx-runtime";
-import { InlineEditingCell as B } from "./inline-editing-cell/inline-editing-cell.js";
-import { ItemActionMenu as _ } from "../../item-action-menu/item-action-menu.js";
-import { GhostTableRow as k } from "./ghost-table-row/ghost-table-row.js";
-const b = (t, e, r) => {
-  const n = r ? e.split(".")[1] : e;
-  return $(t, n);
-}, M = /* @__PURE__ */ I.memo(({
-  item: t,
+import { InlineEditingCell as _ } from "./inline-editing-cell/inline-editing-cell.js";
+import { ItemActionMenu as M } from "../../item-action-menu/item-action-menu.js";
+import { GhostTableRow as U } from "./ghost-table-row/ghost-table-row.js";
+const E = (e, t, r) => {
+  const n = r ? t.split(".")[1] : t;
+  return x(e, n);
+}, W = /* @__PURE__ */ I.memo(({
   column: e,
-  iconColumnVariant: r
+  iconColumnVariant: t,
+  item: r
 }) => {
   const {
     id: n,
-    isItemMetadata: s,
-    subtitle: a,
+    isItemMetadata: a,
+    subtitle: s,
     textValue: m
-  } = e, d = `${m}-${t.id}`;
+  } = e, d = `${m}-${r.id}`;
   return /* @__PURE__ */ l(h, {
     children: /* @__PURE__ */ T("div", {
       className: i.tableNameCell,
-      children: [/* @__PURE__ */ l(y, {
+      children: [/* @__PURE__ */ l(b, {
         className: i.tableNameCellIconInline,
-        item: t
+        item: r
       }), /* @__PURE__ */ T("div", {
         className: R(i.tableNameCellTitle, {
-          [i.hasSubtitle]: r === N.INLINE_SUBTITLE
+          [i.hasSubtitle]: t === N.INLINE_SUBTITLE
         }),
         children: [/* @__PURE__ */ l(u, {
           as: "span",
           className: i.tableNameCellText,
-          children: b(t, n, s)
-        }), r === N.INLINE_SUBTITLE && /* @__PURE__ */ l(u, {
+          children: E(r, n, a)
+        }), t === N.INLINE_SUBTITLE && /* @__PURE__ */ l(u, {
           as: "span",
           className: i.tableNameCellText,
           color: "textOnLightSecondary",
-          children: a
+          children: s
         })]
       })]
     })
   }, d);
-}), U = /* @__PURE__ */ I.memo(({
-  item: t,
-  column: e
+}), k = /* @__PURE__ */ I.memo(({
+  column: e,
+  item: t
 }) => {
   var n;
   const r = `${e.textValue}-${t.id}`;
   return /* @__PURE__ */ l(h, {
     children: (n = e.cellRenderer) == null ? void 0 : n.call(e, t, e)
   }, r);
-}), W = /* @__PURE__ */ I.memo(({
-  item: t,
-  column: e
+}), j = /* @__PURE__ */ I.memo(({
+  column: e,
+  item: t
 }) => {
-  const r = `${e.textValue}-${t.id}`, n = $(t, e.id);
+  const r = `${e.textValue}-${t.id}`, n = x(t, e.id);
   return n ? /* @__PURE__ */ l(h, {
     children: n.join(" ")
   }, r) : /* @__PURE__ */ l(h, {}, r);
-}), j = /* @__PURE__ */ I.memo(({
-  item: t,
-  column: e
+}), D = /* @__PURE__ */ I.memo(({
+  column: e,
+  item: t
 }) => {
   const {
     id: r,
     isItemMetadata: n,
-    textValue: s
-  } = e, a = `${s}-${t.id}`;
+    textValue: a
+  } = e, s = `${a}-${t.id}`;
   return /* @__PURE__ */ l(h, {
     children: /* @__PURE__ */ l(u, {
       as: "span",
-      children: b(t, r, n)
+      children: E(t, r, n)
     })
-  }, a);
-}), D = /* @__PURE__ */ I.memo(({
-  item: t,
+  }, s);
+}), G = /* @__PURE__ */ I.memo(({
   column: e,
-  iconColumnVariant: r,
+  iconColumnVariant: t,
+  item: r,
   onInlineEditChange: n
 }) => {
   const {
-    cellRenderer: s,
-    id: a,
+    cellRenderer: a,
+    id: s,
     isInlineEditingEnabled: m,
     type: d
   } = e;
-  return a === "item.name" && (r === N.INLINE || r === N.INLINE_SUBTITLE) ? /* @__PURE__ */ l(M, {
+  return s === "item.name" && (t === N.INLINE || t === N.INLINE_SUBTITLE) ? /* @__PURE__ */ l(W, {
     column: e,
-    iconColumnVariant: r,
-    item: t
-  }) : s ? /* @__PURE__ */ l(U, {
+    iconColumnVariant: t,
+    item: r
+  }) : a ? /* @__PURE__ */ l(k, {
     column: e,
-    item: t
-  }) : m && (d === "multiSelect" || d === "enum") ? /* @__PURE__ */ l(B, {
+    item: r
+  }) : m && (d === "multiSelect" || d === "enum") ? /* @__PURE__ */ l(_, {
     column: e,
-    item: t,
+    item: r,
     onInlineEditChange: n
-  }, `${e.id}-${t.id}`) : d === "multiSelect" ? /* @__PURE__ */ l(W, {
+  }, `${e.id}-${r.id}`) : d === "multiSelect" ? /* @__PURE__ */ l(j, {
     column: e,
-    item: t
-  }) : /* @__PURE__ */ l(j, {
+    item: r
+  }) : /* @__PURE__ */ l(D, {
     column: e,
-    item: t
+    item: r
   });
-}), G = /* @__PURE__ */ I.memo(({
-  item: t,
-  zoomLevel: e
+}), H = /* @__PURE__ */ I.memo(({
+  item: e,
+  zoomLevel: t
 }) => /* @__PURE__ */ l(h, {
   style: {
-    height: S[e]
+    height: w[t]
   },
-  children: /* @__PURE__ */ l(y, {
+  children: /* @__PURE__ */ l(b, {
     className: i.iconCell,
-    item: t
+    item: e
   })
-}, `item-type-icon-${t.id}`)), H = /* @__PURE__ */ I.memo(({
-  item: t,
-  itemActionMenuProps: e,
+}, `item-type-icon-${e.id}`)), A = /* @__PURE__ */ I.memo(({
+  item: e,
+  itemActionMenuProps: t,
   isCheckboxDisabled: r
-}) => /* @__PURE__ */ l(g, {
+}) => /* @__PURE__ */ l(S, {
   isCheckboxDisabled: r,
-  children: (n) => e ? /* @__PURE__ */ l(_, {
-    ...e,
-    item: t,
+  children: (n) => t ? /* @__PURE__ */ l(M, {
+    ...t,
+    item: e,
     onOpenChange: n
   }) : null
-})), z = ({
-  columns: t,
-  iconColumnVariant: e,
-  isSelectAllEnabled: r,
-  items: n,
-  itemActionMenuProps: s,
-  areSelectionCheckboxesDisabled: a,
-  virtualItems: m,
-  columnCount: d,
-  zoomLevel: p,
-  onInlineEditChange: x
+})), P = ({
+  areSelectionCheckboxesDisabled: e,
+  columnCount: t,
+  columns: r,
+  iconColumnVariant: n,
+  isSelectAllEnabled: a,
+  items: s,
+  itemActionMenuProps: m,
+  onInlineEditChange: d,
+  onTableRowClick: p,
+  virtualItems: C,
+  zoomLevel: y
 }) => {
-  const E = e === N.COLUMN;
-  if (m) {
-    const o = (c) => /* @__PURE__ */ l(k, {
-      columnLength: d || 0,
+  const L = n === N.COLUMN;
+  if (C) {
+    const o = (c) => /* @__PURE__ */ l(U, {
+      columnLength: t || 0,
       rowKey: `ghost-${c}`
-    }), f = (c) => /* @__PURE__ */ l(w, {
-      areSelectionCheckboxesDisabled: a,
-      columns: t,
-      iconColumnVariant: e,
-      isSelectAllEnabled: r,
+    }), f = (c) => /* @__PURE__ */ l(B, {
+      areSelectionCheckboxesDisabled: e,
+      columns: r,
+      iconColumnVariant: n,
+      isSelectAllEnabled: a,
       item: c,
-      itemActionMenuProps: s,
-      zoomLevel: p
+      itemActionMenuProps: m,
+      onTableRowClick: p,
+      zoomLevel: y
     });
-    return /* @__PURE__ */ l(C, {
-      items: m,
+    return /* @__PURE__ */ l($, {
+      items: C,
       children: ({
         index: c
-      }) => c >= n.length ? o(c) : f(n[c])
+      }) => c >= s.length ? o(c) : f(s[c])
     });
   }
-  return /* @__PURE__ */ l(C, {
-    items: n.map((o) => ({
+  return /* @__PURE__ */ l($, {
+    items: s.map((o) => ({
       key: o.id,
       ...o
     })),
-    children: (o) => /* @__PURE__ */ T(L, {
+    children: (o) => /* @__PURE__ */ T(g, {
       className: i.tableRow,
       id: o.id,
-      children: [E && /* @__PURE__ */ l(G, {
+      onAction: () => p(o),
+      children: [L && /* @__PURE__ */ l(H, {
         item: o,
-        zoomLevel: p
-      }), t.map((f) => /* @__PURE__ */ l(D, {
+        zoomLevel: y
+      }), r.map((f) => /* @__PURE__ */ l(G, {
         column: f,
-        iconColumnVariant: e,
+        iconColumnVariant: n,
         item: o,
-        onInlineEditChange: x
-      }, `${f.textValue}-${o.id}`)), r && /* @__PURE__ */ l(H, {
-        isCheckboxDisabled: a,
+        onInlineEditChange: d
+      }, `${f.textValue}-${o.id}`)), a && /* @__PURE__ */ l(A, {
+        isCheckboxDisabled: e,
         item: o,
-        itemActionMenuProps: s
+        itemActionMenuProps: m
       })]
     }, o.id)
   });
 };
 export {
-  z as default
+  P as default
 };

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

@@ -1,52 +1,54 @@
-import { Table as x } from "@box/blueprint-web";
-import { I as B } from "../../../../chunks/types.js";
-import { GhostTableBody as d } from "./table-body/ghost-table-body.js";
-import j from "./table-body/table-body-with-data.js";
-import y from "./messages.js";
-import { jsxs as G, jsx as i } from "react/jsx-runtime";
-const R = ({
-  tableHeader: s,
+import { Table as B } from "@box/blueprint-web";
+import { I as d } from "../../../../chunks/types.js";
+import { GhostTableBody as j } from "./table-body/ghost-table-body.js";
+import y from "./table-body/table-body-with-data.js";
+import G from "./messages.js";
+import { jsxs as V, jsx as i } from "react/jsx-runtime";
+const U = ({
+  columnCount: s,
   columns: t,
+  formatMessage: c,
   iconColumnVariant: e,
-  isSelectAllEnabled: r,
-  areSelectionCheckboxesDisabled: c,
-  itemActionMenuProps: f,
-  items: h,
-  isLoading: m,
-  formatMessage: C,
-  tableProps: g,
+  isLoading: r,
+  isSelectAllEnabled: m,
+  areSelectionCheckboxesDisabled: f,
+  itemActionMenuProps: h,
+  items: C,
+  onInlineEditChange: g,
+  onTableRowClick: p,
+  style: u,
+  tableHeader: a,
+  tableProps: b,
   virtualItems: o,
-  style: p,
-  columnCount: u,
-  zoomLevel: a,
-  onInlineEditChange: b
+  zoomLevel: T
 }) => {
-  const l = u || (() => {
+  const l = s || (() => {
     let n = t.length;
-    return e === B.COLUMN && (n += 1), r && (n += 1), n;
-  })(), T = m && !(o != null && o.length);
-  return /* @__PURE__ */ G(x, {
-    "aria-label": C(y.listView),
+    return e === d.COLUMN && (n += 1), m && (n += 1), n;
+  })(), x = r && !(o != null && o.length);
+  return /* @__PURE__ */ V(B, {
+    "aria-label": c(G.listView),
     selectionBehavior: "toggle",
-    style: p,
-    ...g,
-    children: [s, T ? /* @__PURE__ */ i(d, {
+    style: u,
+    ...b,
+    children: [a, x ? /* @__PURE__ */ i(j, {
       columnLength: l
-    }) : /* @__PURE__ */ i(j, {
-      areSelectionCheckboxesDisabled: c,
+    }) : /* @__PURE__ */ i(y, {
+      areSelectionCheckboxesDisabled: f,
       columnCount: l,
       columns: t,
       iconColumnVariant: e,
-      isLoading: m,
-      isSelectAllEnabled: r,
-      itemActionMenuProps: f,
-      items: h,
-      onInlineEditChange: b,
+      isLoading: r,
+      isSelectAllEnabled: m,
+      itemActionMenuProps: h,
+      items: C,
+      onInlineEditChange: g,
+      onTableRowClick: p,
       virtualItems: o,
-      zoomLevel: a
+      zoomLevel: T
     })]
   });
 };
 export {
-  R as TableRenderer
+  U as TableRenderer
 };

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

@@ -1,15 +1,17 @@
 import { TableProps } from '@box/blueprint-web';
+import { Item } from '@box/types';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
 import { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export interface MetadataTableProps extends TableProps, MetadataProps, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
+    areSelectionCheckboxesDisabled?: boolean;
     columns: Column[];
+    hasNextPage?: boolean;
     iconColumnVariant?: IconColumnVariant;
-    isSelectAllEnabled?: boolean;
-    areSelectionCheckboxesDisabled?: boolean;
     isInfiniteScrollEnabled?: boolean;
-    hasNextPage?: boolean;
+    isSelectAllEnabled?: boolean;
     onGetNextPage?: () => void;
+    onTableRowClick?: (item: Item) => void;
     placeholderRowsCount?: number;
     zoomLevel?: number;
 }
-export declare const MetadataTable: ({ columns, isLoading, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, isInfiniteScrollEnabled, areSelectionCheckboxesDisabled, hasNextPage, onInlineEditChange, onGetNextPage, placeholderRowsCount, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataTable: ({ areSelectionCheckboxesDisabled, columns, hasNextPage, iconColumnVariant, isInfiniteScrollEnabled, isLoading, isSelectAllEnabled, itemActionMenuProps, items, 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

@@ -5,8 +5,8 @@ import { IconColumnVariant, Column } from '../../../types';
 import { MetadataTableProps } from '../metadata-table';
 import { InlineEditingCellProps } from './inline-editing-cell';
 interface TableBodyWithDataProps extends Omit<MetadataTableProps, keyof TableProps>, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
-    virtualItems?: VirtualItem[];
     columnCount?: number;
+    virtualItems?: VirtualItem[];
 }
 type CellProps = {
     item: Item;
@@ -14,5 +14,5 @@ type CellProps = {
     iconColumnVariant: IconColumnVariant;
 };
 export type DataCellProps = CellProps & Pick<InlineEditingCellProps, 'onInlineEditChange'>;
-declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, areSelectionCheckboxesDisabled, virtualItems, columnCount, zoomLevel, onInlineEditChange, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBodyWithData: ({ areSelectionCheckboxesDisabled, columnCount, columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, onInlineEditChange, onTableRowClick, virtualItems, 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

@@ -1,12 +1,13 @@
 import { Item } from '@box/types';
 import { MetadataTableProps } from '../../metadata-table';
 export interface TableRowProps {
-    item: Item;
+    areSelectionCheckboxesDisabled?: MetadataTableProps['areSelectionCheckboxesDisabled'];
     columns: MetadataTableProps['columns'];
     iconColumnVariant: MetadataTableProps['iconColumnVariant'];
     isSelectAllEnabled: MetadataTableProps['isSelectAllEnabled'];
+    item: Item;
     itemActionMenuProps: MetadataTableProps['itemActionMenuProps'];
-    areSelectionCheckboxesDisabled?: MetadataTableProps['areSelectionCheckboxesDisabled'];
     zoomLevel?: number;
+    onTableRowClick: MetadataTableProps['onTableRowClick'];
 }
-export declare const TableRow: ({ item, columns, iconColumnVariant, isSelectAllEnabled, itemActionMenuProps, areSelectionCheckboxesDisabled, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRow: ({ areSelectionCheckboxesDisabled, columns, iconColumnVariant, isSelectAllEnabled, item, itemActionMenuProps, onTableRowClick, zoomLevel, }: TableRowProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,22 +1,24 @@
 import { VirtualItem } from '@tanstack/react-virtual';
 import { useIntl } from 'react-intl';
 import { TableProps } from '@box/blueprint-web';
+import { Item } from '@box/types';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
 import { InlineEditingCellProps } from './table-body/inline-editing-cell';
 export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInlineEditChange'> {
-    tableHeader: React.ReactNode;
     columns: Column[];
+    columnCount?: number;
+    formatMessage: ReturnType<typeof useIntl>['formatMessage'];
     iconColumnVariant?: IconColumnVariant;
+    isLoading?: boolean;
     isSelectAllEnabled?: boolean;
     areSelectionCheckboxesDisabled?: boolean;
     itemActionMenuProps?: MetadataProps['itemActionMenuProps'];
     items: MetadataProps['items'];
-    isLoading?: boolean;
-    formatMessage: ReturnType<typeof useIntl>['formatMessage'];
+    onTableRowClick: (item: Item) => void;
+    style?: React.CSSProperties;
+    tableHeader: React.ReactNode;
     tableProps: TableProps;
     virtualItems?: VirtualItem[];
-    style?: React.CSSProperties;
-    columnCount?: number;
     zoomLevel?: number;
 }
-export declare const TableRenderer: ({ tableHeader, columns, iconColumnVariant, isSelectAllEnabled, areSelectionCheckboxesDisabled, itemActionMenuProps, items, isLoading, formatMessage, tableProps, virtualItems, style, columnCount: passedColumnCount, zoomLevel, onInlineEditChange, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TableRenderer: ({ columnCount: passedColumnCount, columns, formatMessage, iconColumnVariant, isLoading, isSelectAllEnabled, areSelectionCheckboxesDisabled, itemActionMenuProps, items, onInlineEditChange, onTableRowClick, style, tableHeader, tableProps, virtualItems, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.1.0",
+    "version": "1.2.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.76.2",
@@ -18,12 +18,12 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.81.4",
+        "@box/blueprint-web": "^12.82.0",
         "@box/blueprint-web-assets": "^4.71.0",
-        "@box/box-item-type-selector": "^0.77.0",
+        "@box/box-item-type-selector": "^0.77.1",
         "@box/eslint-plugin-blueprint": "1.0.5",
-        "@box/item-icon": "^1.1.0",
-        "@box/metadata-filter": "^1.37.0",
+        "@box/item-icon": "^1.1.1",
+        "@box/metadata-filter": "^1.37.1",
         "@box/storybook-utils": "0.14.7",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",