@box/metadata-view 1.23.0 → 1.24.0

package/dist/chunks/index.js

@@ -1,96 +1,95 @@
-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 R from "clsx";
-import { I as o } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as g } from "../esm/lib/components/constants.js";
+import { Row as S, Cell as s, Text as i, ActionCell as q } from "@box/blueprint-web";
+import f from "lodash/get";
+import { ItemTypeIcon as I } from "@box/item-icon";
+import E from "clsx";
+import { I as n } from "./types.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as H } from "../esm/lib/components/constants.js";
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-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,
+import { ItemActionMenu as y } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/index.css';const R = "_tableHeaderActionsWrapper_gffqj_1", w = "_tableHeaderActions_gffqj_1", k = "_tableRow_gffqj_33", U = "_selectAllCheckbox_gffqj_42", B = "_tableNameCell_gffqj_47", W = "_tableNameCellTitle_gffqj_53", M = "_hasSubtitle_gffqj_57", $ = "_tableNameCellText_gffqj_62", v = "_tableNameCellIconInline_gffqj_67", O = "_iconCell_gffqj_71", t = {
+  tableHeaderActionsWrapper: R,
+  tableHeaderActions: w,
+  tableRow: k,
+  selectAllCheckbox: U,
+  tableNameCell: B,
+  tableNameCellTitle: W,
   hasSubtitle: M,
   tableNameCellText: $,
   tableNameCellIconInline: v,
-  infiniteScrollTableContainerFullHeight: O,
-  iconCell: D
-}, Z = ({
-  areSelectionCheckboxesDisabled: h,
-  columns: T,
+  iconCell: O
+}, Y = ({
+  areSelectionCheckboxesDisabled: C,
+  columns: h,
   iconColumnVariant: a,
   item: l,
   itemActionMenuProps: _,
   onTableRowClick: p,
-  shouldRenderActionColumn: u,
+  shouldRenderActionColumn: T,
   zoomLevel: x = 0
-}) => /* @__PURE__ */ b(E, {
+}) => /* @__PURE__ */ b(S, {
   className: t.tableRow,
   id: l.id,
   onAction: () => p(l),
-  children: [a === o.COLUMN ? /* @__PURE__ */ e(n, {
+  children: [a === n.COLUMN ? /* @__PURE__ */ e(s, {
     style: {
-      height: g[x]
+      height: H[x]
     },
-    children: /* @__PURE__ */ e(C, {
+    children: /* @__PURE__ */ e(I, {
       className: t.iconCell,
       item: l
     })
-  }, `item-type-icon-${l.id}`) : null, T.map((c) => {
+  }, `item-type-icon-${l.id}`) : null, h.map((c) => {
     const {
       cellRenderer: d,
-      id: s,
-      isItemMetadata: f,
-      subtitle: S,
-      textValue: A,
-      type: H
-    } = c, i = `${A}-${l.id}`;
+      id: o,
+      isItemMetadata: u,
+      subtitle: g,
+      textValue: j,
+      type: A
+    } = c, r = `${j}-${l.id}`;
     if (d)
-      return /* @__PURE__ */ e(n, {
+      return /* @__PURE__ */ e(s, {
         children: d(l, c)
-      }, i);
-    const L = f ? s.split(".")[1] : s, m = I(l, L);
-    if (s === "name" && (a === o.INLINE || a === o.INLINE_SUBTITLE))
-      return /* @__PURE__ */ e(n, {
+      }, r);
+    const L = u ? o.split(".")[1] : o, m = f(l, L);
+    if (o === "name" && (a === n.INLINE || a === n.INLINE_SUBTITLE))
+      return /* @__PURE__ */ e(s, {
         children: /* @__PURE__ */ b("div", {
           className: t.tableNameCell,
-          children: [/* @__PURE__ */ e(C, {
+          children: [/* @__PURE__ */ e(I, {
             item: l
           }), /* @__PURE__ */ b("div", {
-            className: R(t.tableNameCellTitle, {
-              [t.hasSubtitle]: a === o.INLINE_SUBTITLE
+            className: E(t.tableNameCellTitle, {
+              [t.hasSubtitle]: a === n.INLINE_SUBTITLE
             }),
-            children: [/* @__PURE__ */ e(r, {
+            children: [/* @__PURE__ */ e(i, {
               as: "span",
               className: t.tableNameCellText,
               children: m
-            }), a === o.INLINE_SUBTITLE ? /* @__PURE__ */ e(r, {
+            }), a === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(i, {
               as: "span",
               className: t.tableNameCellText,
               color: "textOnLightSecondary",
-              children: S
+              children: g
             }) : null]
           })]
         })
-      }, i);
-    if (H === "multiSelect") {
-      const N = I(l, s);
-      return /* @__PURE__ */ e(n, {
+      }, r);
+    if (A === "multiSelect") {
+      const N = f(l, o);
+      return /* @__PURE__ */ e(s, {
         children: N ? N.join(" ") : ""
-      }, i);
+      }, r);
     }
-    return /* @__PURE__ */ e(n, {
-      children: /* @__PURE__ */ e(r, {
+    return /* @__PURE__ */ e(s, {
+      children: /* @__PURE__ */ e(i, {
         as: "span",
         children: m
       })
-    }, i);
-  }), u && /* @__PURE__ */ e(y, {
-    isCheckboxDisabled: h,
-    children: (c) => _ ? /* @__PURE__ */ e(w, {
+    }, r);
+  }), T && /* @__PURE__ */ e(q, {
+    isCheckboxDisabled: C,
+    children: (c) => _ ? /* @__PURE__ */ e(y, {
       ..._,
       item: l,
       onOpenChange: c
@@ -98,6 +97,6 @@ import '../styles/index.css';const k = "_tableHeaderActionsWrapper_1a999_1", U =
   })]
 }, l.id);
 export {
-  Z as T,
+  Y as T,
   t as s
 };

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

@@ -1,33 +1,33 @@
-import { useRef as h, useMemo as S, useEffect as T } from "react";
-import { useVirtualizer as b } from "@tanstack/react-virtual";
+import { useVirtualizer as S } from "@tanstack/react-virtual";
+import { useRef as h, useMemo as z, useEffect as T } from "react";
 import { Size14 as p } from "@box/blueprint-web-assets/tokens/px-tokens";
-const z = parseInt(p, 10), V = ({
-  items: e,
-  hasNextPage: t = !1,
+const b = parseInt(p, 10), _ = ({
+  items: t,
+  hasNextPage: e = !1,
   isLoading: r = !1,
-  parentRef: n,
-  approximateRowHeight: g = z,
+  parentRef: l,
+  approximateRowHeight: a = b,
   onGetNextPage: o,
   placeholderRowsCount: c = 20
 }) => {
-  const s = h(0), f = S(() => e.length + (r || t ? c : 0), [e, t, r, c]), u = b({
+  const s = h(0), f = z(() => t.length + (r || e ? c : 0), [t, e, r, c]), u = S({
     count: f,
-    getScrollElement: () => n.current,
+    getScrollElement: () => l.current,
     getItemKey: (I) => {
       var m;
-      return ((m = e[I]) == null ? void 0 : m.id) || `table-item-${I}`;
+      return ((m = t[I]) == null ? void 0 : m.id) || `table-item-${I}`;
     },
-    estimateSize: () => g
-  }), l = u.getVirtualItems();
+    estimateSize: () => a
+  }), n = u.getVirtualItems();
   T(() => {
-    s.current = e.length;
-  }, [e.length]), (e.length === 0 || e.length > 0 && s.current === 0) && n.current && (n.current.scrollTop = 0);
-  const i = l[l.length - 1], a = !!i && i.index >= e.length - 1;
-  return !r && a && t && o && o(), {
-    getTableHeight: u.getTotalSize,
-    virtualItemsToDisplay: l
+    s.current = t.length;
+  }, [t.length]), (t.length === 0 || t.length > 0 && s.current === 0) && l.current && (l.current.scrollTop = 0);
+  const i = n[n.length - 1], g = !!i && i.index >= t.length - 1;
+  return !r && g && e && o && o(), {
+    totalVirtualSize: u.getTotalSize(),
+    virtualItemsToDisplay: n
   };
 };
 export {
-  V as useInfiniteScrollTableItems
+  _ as useInfiniteScrollTableItems
 };

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

@@ -1,144 +1,128 @@
-import { useRef as O } from "react";
-import { useIntl as U } from "react-intl";
-import { Text as k, ListCheckbox as F, TableHeader as G, Column as L } from "@box/blueprint-web";
-import V from "lodash/noop";
-import { useInfiniteScrollTableItems as X } from "./hooks/useInfiniteScrollTableItems.js";
-import { TableRenderer as I } from "./table-renderer.js";
-import { I as Y } from "../../../../chunks/types.js";
-import { THUMBNAIL_WIDTHS as Z } from "../constants.js";
-import { s } from "../../../../chunks/index.js";
-import $ from "./messages.js";
-import { getShouldRenderActionColumn as q } from "./actionColumn.js";
-import { jsx as e, jsxs as J } from "react/jsx-runtime";
+import { useRef as v } from "react";
+import { useIntl as B } from "react-intl";
+import { Text as O, ListCheckbox as Z, DataTableWrapper as _, TableHeader as q, Column as E } 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 J } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as K } from "../constants.js";
+import { s as i } from "../../../../chunks/index.js";
+import { getShouldRenderActionColumn as Q } from "./actionColumn.js";
+import X from "./messages.js";
+import { jsx as t, jsxs as Y } from "react/jsx-runtime";
 import "./table-body/inline-editing-cell/inline-editing-cell.js";
-const K = 40, de = ({
+const me = ({
   areSelectionCheckboxesDisabled: n = !1,
   columns: m,
-  hasNextPage: x = !1,
+  hasNextPage: b = !1,
   iconColumnVariant: d,
-  isInfiniteScrollEnabled: A = !1,
-  isLoading: i = !1,
+  isInfiniteScrollEnabled: T = !1,
+  isLoading: s = !1,
   isSelectAllEnabled: W,
-  itemActionMenuProps: g,
+  itemActionMenuProps: x,
   items: c,
-  maxActionColumnWidth: w,
-  minActionColumnWidth: y,
+  maxActionColumnWidth: A,
+  minActionColumnWidth: w,
   onGetNextPage: C,
-  onInlineEditChange: N,
-  onTableRowClick: S = V,
-  placeholderRowsCount: _,
+  onInlineEditChange: S,
+  onTableRowClick: N = F,
+  placeholderRowsCount: g,
   zoomLevel: a,
   ...l
 }) => {
-  var H;
   const {
     formatMessage: f
-  } = U(), p = O(null), {
-    virtualItemsToDisplay: h,
-    getTableHeight: v
-  } = X({
+  } = B(), p = v(null), {
+    virtualItemsToDisplay: y,
+    totalVirtualSize: D
+  } = G({
     items: c,
-    hasNextPage: x,
-    isLoading: i,
+    hasNextPage: b,
+    isLoading: s,
     parentRef: p,
     onGetNextPage: C,
-    placeholderRowsCount: _
-  }), r = [], D = 0;
-  if (d === Y.COLUMN) {
-    a = a || D;
-    const t = parseInt(Z[a], 10) + 24;
+    placeholderRowsCount: g
+  }), r = [], M = 0;
+  if (d === J.COLUMN) {
+    a = a || M;
+    const e = parseInt(K[a], 10) + 24;
     r.push({
       id: "item-type-icon",
       isRowHeader: !1,
       hideHeader: !1,
-      minWidth: t,
-      maxWidth: t
+      minWidth: e,
+      maxWidth: e
     });
   }
-  const E = m.map((t) => {
+  const j = m.map((e) => {
     const {
-      id: b,
-      isRowHeader: j,
-      headerRenderer: R,
+      id: h,
+      isRowHeader: V,
+      headerRenderer: H,
       textValue: o,
-      type: T,
-      ...B
-    } = t;
+      type: I,
+      ...k
+    } = e;
     return {
-      ...B,
-      children: R ? R(o, t) : /* @__PURE__ */ e(k, {
+      ...k,
+      children: H ? H(o, e) : /* @__PURE__ */ t(O, {
         as: "span",
         children: o
       }),
-      isRowHeader: b === "name" || j,
-      id: b,
+      isRowHeader: h === "name" || V,
+      id: h,
       textValue: o,
-      allowsSorting: T !== "multiSelect" && T !== "enum"
+      allowsSorting: I !== "multiSelect" && I !== "enum"
     };
   });
-  r.push(...E), q(l) && r.push({
+  r.push(...j), Q(l) && r.push({
     id: "actions",
-    className: s.tableHeaderActions,
-    children: /* @__PURE__ */ J("div", {
-      className: s.tableHeaderActionsWrapper,
-      children: [l.HeaderActions, W ? /* @__PURE__ */ e(F, {
-        "aria-label": f($.selectAll),
-        className: s.selectAllCheckbox,
-        isDisabled: i || n
+    className: i.tableHeaderActions,
+    children: /* @__PURE__ */ Y("div", {
+      className: i.tableHeaderActionsWrapper,
+      children: [l.HeaderActions, W ? /* @__PURE__ */ t(Z, {
+        "aria-label": f(X.selectAll),
+        className: i.selectAllCheckbox,
+        isDisabled: s || n
       }) : null]
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1,
-    maxWidth: w,
-    minWidth: y
+    maxWidth: A,
+    minWidth: w
   });
-  const M = /* @__PURE__ */ e(G, {
+  const U = /* @__PURE__ */ t(q, {
     columns: r,
-    children: (t) => /* @__PURE__ */ e(L, {
-      ...t
+    children: (e) => /* @__PURE__ */ t(E, {
+      ...e
     })
   }), u = {
     columnCount: r.length,
     columns: m,
     formatMessage: f,
     iconColumnVariant: d,
-    isLoading: i,
+    isLoading: s,
     areSelectionCheckboxesDisabled: n,
-    itemActionMenuProps: g,
+    itemActionMenuProps: x,
     items: c,
-    onInlineEditChange: N,
-    onTableRowClick: S,
-    tableHeader: M,
+    onInlineEditChange: S,
+    onTableRowClick: N,
+    tableHeader: U,
     tableProps: l,
     zoomLevel: a
   };
-  return A ? /* @__PURE__ */ e("div", {
+  return T ? /* @__PURE__ */ t(_, {
     ref: p,
-    className: s.infiniteScrollTableContainerFullHeight,
-    children: /* @__PURE__ */ e("div", {
-      style: {
-        position: "relative",
-        width: "100%",
-        height: v() + K
-      },
-      children: /* @__PURE__ */ e(I, {
-        ...u,
-        style: {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          transform: `translateY(${((H = h[0]) == null ? void 0 : H.start) || 0}px)`,
-          tableLayout: "fixed"
-        },
-        virtualItems: h
-      })
+    children: /* @__PURE__ */ t(R, {
+      ...u,
+      totalVirtualSize: D,
+      virtualItems: y
     })
-  }) : /* @__PURE__ */ e(I, {
+  }) : /* @__PURE__ */ t(R, {
     ...u
   });
 };
 export {
-  de as MetadataTable
+  me as MetadataTable
 };

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

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

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

@@ -1,11 +1,11 @@
-import { Table as x } from "@box/blueprint-web";
-import { I as B } from "../../../../chunks/types.js";
-import { GhostTableBody as R } from "./table-body/ghost-table-body.js";
-import j from "./table-body/table-body-with-data.js";
-import y from "./messages.js";
+import { Table as B } from "@box/blueprint-web";
+import { I as R } 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 { getShouldRenderActionColumn as A } from "./actionColumn.js";
-import { jsxs as G, jsx as c } from "react/jsx-runtime";
-const U = ({
+import G from "./messages.js";
+import { jsxs as V, jsx as c } from "react/jsx-runtime";
+const W = ({
   columnCount: s,
   columns: e,
   formatMessage: u,
@@ -20,20 +20,21 @@ const U = ({
   tableHeader: a,
   tableProps: l,
   virtualItems: o,
-  zoomLevel: b
+  totalVirtualSize: b,
+  zoomLevel: T
 }) => {
   const m = A(l), i = s || (() => {
     let n = e.length;
-    return t === B.COLUMN && (n += 1), m && (n += 1), n;
-  })(), T = r && !(o != null && o.length);
-  return /* @__PURE__ */ G(x, {
-    "aria-label": u(y.listView),
+    return t === R.COLUMN && (n += 1), m && (n += 1), n;
+  })(), x = r && !(o != null && o.length);
+  return /* @__PURE__ */ V(B, {
+    "aria-label": u(G.listView),
     selectionBehavior: "toggle",
     style: p,
     ...l,
-    children: [a, T ? /* @__PURE__ */ c(R, {
+    children: [a, x ? /* @__PURE__ */ c(j, {
       columnLength: i
-    }) : /* @__PURE__ */ c(j, {
+    }) : /* @__PURE__ */ c(y, {
       areSelectionCheckboxesDisabled: h,
       columnCount: i,
       columns: e,
@@ -44,11 +45,12 @@ const U = ({
       onInlineEditChange: g,
       onTableRowClick: d,
       shouldRenderActionColumn: m,
+      totalVirtualSize: b,
       virtualItems: o,
-      zoomLevel: b
+      zoomLevel: T
     })]
   });
 };
 export {
-  U as TableRenderer
+  W as TableRenderer
 };

package/dist/styles/index.css

@@ -1 +1 @@
-._tableHeaderActionsWrapper_1a999_1{position:absolute;top:0;right:var(--size-4);bottom:0;display:flex;gap:var(--space-2);align-items:center;justify-content:center;padding:0 var(--space-2);background:var(--item-background);margin-block:var(--space-2)}._tableHeaderActionsWrapper_1a999_1:before{position:absolute;left:0;z-index:0;display:block;width:0;height:50%;box-shadow:-.25rem 0 .625rem .625rem var(--item-background);content:""}._tableHeaderActions_1a999_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_1a999_33:after{height:100%!important}._tableRow_1a999_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_1a999_42 svg{transform:none!important}._tableNameCell_1a999_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellTitle_1a999_53{overflow:hidden;text-overflow:ellipsis}._tableNameCellTitle_1a999_53._hasSubtitle_1a999_57{display:flex;flex-direction:column}._tableNameCellText_1a999_62{overflow:hidden;text-overflow:ellipsis}._tableNameCellIconInline_1a999_67{flex-shrink:0}._infiniteScrollTableContainerFullHeight_1a999_71{width:100%;height:100%;overflow:auto}._iconCell_1a999_77{width:100%!important;height:100%!important}
+._tableHeaderActionsWrapper_gffqj_1{position:absolute;top:0;right:var(--size-4);bottom:0;display:flex;gap:var(--space-2);align-items:center;justify-content:center;padding:0 var(--space-2);background:var(--item-background);margin-block:var(--space-2)}._tableHeaderActionsWrapper_gffqj_1:before{position:absolute;left:0;z-index:0;display:block;width:0;height:50%;box-shadow:-.25rem 0 .625rem .625rem var(--item-background);content:""}._tableHeaderActions_gffqj_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_gffqj_33:after{height:100%!important}._tableRow_gffqj_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_gffqj_42 svg{transform:none!important}._tableNameCell_gffqj_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellTitle_gffqj_53{overflow:hidden;text-overflow:ellipsis}._tableNameCellTitle_gffqj_53._hasSubtitle_gffqj_57{display:flex;flex-direction:column}._tableNameCellText_gffqj_62{overflow:hidden;text-overflow:ellipsis}._tableNameCellIconInline_gffqj_67{flex-shrink:0}._iconCell_gffqj_71{width:100%!important;height:100%!important}

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

@@ -9,7 +9,7 @@ type UseInfiniteScrollTableItemsProps = {
     placeholderRowsCount?: number;
 };
 export declare const useInfiniteScrollTableItems: ({ items, hasNextPage, isLoading, parentRef, approximateRowHeight, onGetNextPage, placeholderRowsCount, }: UseInfiniteScrollTableItemsProps) => {
-    getTableHeight: () => number;
+    totalVirtualSize: number;
     virtualItemsToDisplay: import('@tanstack/virtual-core').VirtualItem[];
 };
 export {};

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

@@ -7,6 +7,7 @@ import { InlineEditingCellProps } from './inline-editing-cell';
 interface TableBodyWithDataProps extends Omit<MetadataTableProps, keyof TableProps>, Pick<InlineEditingCellProps, 'onInlineEditChange'> {
     columnCount?: number;
     shouldRenderActionColumn?: boolean;
+    totalVirtualSize?: number;
     virtualItems?: VirtualItem[];
 }
 type CellProps = {
@@ -15,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, zoomLevel, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableBodyWithData: ({ areSelectionCheckboxesDisabled, columnCount, columns, 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-renderer.d.ts

@@ -18,6 +18,7 @@ export interface TableRendererProps extends Pick<InlineEditingCellProps, 'onInli
     tableHeader: React.ReactNode;
     tableProps: TableProps;
     virtualItems?: VirtualItem[];
+    totalVirtualSize?: number;
     zoomLevel?: number;
 }
-export declare const TableRenderer: ({ columnCount: passedColumnCount, columns, formatMessage, iconColumnVariant, isLoading, areSelectionCheckboxesDisabled, itemActionMenuProps, items, onInlineEditChange, onTableRowClick, style, tableHeader, tableProps, virtualItems, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.23.0",
+    "version": "1.24.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.76.2",