@box/metadata-view 0.27.3 → 0.28.1

package/dist/chunks/table-row.js

@@ -0,0 +1,95 @@
+import { Row as S, Cell as c, Text as s, ActionCell as H } from "@box/blueprint-web";
+import b from "lodash/get";
+import { ItemTypeIcon as m } from "@box/item-icon";
+import L from "clsx";
+import { I as n } from "./types.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as A } from "../esm/lib/components/constants.js";
+import { jsxs as _, jsx as e } from "react/jsx-runtime";
+import { ItemActionMenu as x } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/table-row.css';const E = "_tableHeaderActionsWrapper_uw3hc_1", y = "_tableHeaderActions_uw3hc_1", R = "_tableRow_uw3hc_33", g = "_selectAllCheckbox_uw3hc_42", U = "_tableNameCell_uw3hc_47", k = "_tableNameCellSubTitle_uw3hc_53", B = "_infiniteScrollTableContainerFullHeight_uw3hc_58", W = "_iconCell_uw3hc_64", i = {
+  tableHeaderActionsWrapper: E,
+  tableHeaderActions: y,
+  tableRow: R,
+  selectAllCheckbox: g,
+  tableNameCell: U,
+  tableNameCellSubTitle: k,
+  infiniteScrollTableContainerFullHeight: B,
+  iconCell: W
+}, q = ({
+  item: l,
+  columns: N,
+  iconColumnVariant: t,
+  isSelectAllEnabled: p,
+  itemActionMenuProps: d,
+  zoomLevel: I = 0
+}) => {
+  const T = I;
+  return /* @__PURE__ */ _(S, {
+    className: i.tableRow,
+    id: l.id,
+    children: [t === n.COLUMN ? /* @__PURE__ */ e(c, {
+      style: {
+        height: A[T]
+      },
+      children: /* @__PURE__ */ e(m, {
+        className: i.iconCell,
+        item: l
+      })
+    }, `item-type-icon-${l.id}`) : null, N.map((o) => {
+      const {
+        cellRenderer: h,
+        id: a,
+        subTitle: C,
+        textValue: f,
+        type: w
+      } = o, r = `${f}-${l.id}`;
+      if (a === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
+        return /* @__PURE__ */ e(c, {
+          children: /* @__PURE__ */ _("div", {
+            className: i.tableNameCell,
+            children: [/* @__PURE__ */ e(m, {
+              item: l
+            }), /* @__PURE__ */ _("div", {
+              className: L({
+                [i.tableNameCellSubTitle]: t === n.INLINE_SUBTITLE
+              }),
+              children: [/* @__PURE__ */ e(s, {
+                as: "span",
+                children: b(l, a)
+              }), t === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
+                as: "span",
+                color: "textOnLightSecondary",
+                children: C
+              }) : null]
+            })]
+          })
+        }, r);
+      if (h)
+        return /* @__PURE__ */ e(c, {
+          children: h(l, o)
+        }, r);
+      if (w === "multiSelect") {
+        const u = b(l, a);
+        return /* @__PURE__ */ e(c, {
+          children: u ? u.join(" ") : ""
+        }, r);
+      }
+      return /* @__PURE__ */ e(c, {
+        children: /* @__PURE__ */ e(s, {
+          as: "span",
+          children: b(l, a)
+        })
+      }, r);
+    }), p && /* @__PURE__ */ e(H, {
+      children: (o) => d ? /* @__PURE__ */ e(x, {
+        ...d,
+        item: l,
+        onOpenChange: o
+      }) : null
+    })]
+  }, l.id);
+};
+export {
+  q as T,
+  i as s
+};

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

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

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

@@ -1,89 +1,129 @@
-import { Text as W, ListCheckbox as g, Table as I, TableHeader as w, Column as C } from "@box/blueprint-web";
-import { useIntl as M } from "react-intl";
-import N from "./table-body/ghost-table-body.js";
-import { s as i, T as y } from "../../../../chunks/table-body-with-data.js";
-import { I as A } from "../../../../chunks/types.js";
-import { THUMBNAIL_WIDTHS as B } from "../constants.js";
-import f from "./messages.js";
-import { jsx as a, jsxs as D } from "react/jsx-runtime";
-const S = ({
-  columns: l,
-  isLoading: o = !1,
+import { Text as D, ListCheckbox as _, TableHeader as v, Column as M } from "@box/blueprint-web";
+import { useRef as E } from "react";
+import { useIntl as S } from "react-intl";
+import { useInfiniteScrollTableItems as k } from "./hooks/useInfiniteScrollTableItems.js";
+import T from "./table-renderer.js";
+import { I as B } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as O } from "../constants.js";
+import { s } from "../../../../chunks/table-row.js";
+import P from "./messages.js";
+import { jsx as e } from "react/jsx-runtime";
+const U = 40, K = ({
+  columns: o,
+  isLoading: l = !1,
   iconColumnVariant: n,
   isSelectAllEnabled: d,
-  items: p,
-  itemActionMenuProps: u,
-  zoomLevel: t,
-  ...H
+  items: m,
+  itemActionMenuProps: I,
+  isInfiniteScrollEnabled: R = !1,
+  hasNextPage: x = !1,
+  onGetNextPage: C,
+  placeholderRowsCount: W,
+  zoomLevel: r,
+  ...g
 }) => {
+  var u;
   const {
-    formatMessage: m
-  } = M(), s = [], b = 0;
-  if (n === A.COLUMN) {
-    t = t || b;
-    const e = parseInt(B[t], 10) + 24;
-    s.push({
+    formatMessage: c
+  } = S(), f = E(null), {
+    virtualItemsToDisplay: p,
+    getTableHeight: w
+  } = k({
+    items: m,
+    hasNextPage: x,
+    isLoading: l,
+    parentRef: f,
+    onGetNextPage: C,
+    placeholderRowsCount: W
+  }), a = [], y = 0;
+  if (n === B.COLUMN) {
+    r = r || y;
+    const t = parseInt(O[r], 10) + 24;
+    a.push({
       id: "item-type-icon",
       isRowHeader: !1,
       hideHeader: !1,
-      minWidth: e,
-      maxWidth: e
+      minWidth: t,
+      maxWidth: t
     });
   }
-  const T = l.map((e) => {
+  const A = o.map((t) => {
     const {
-      id: c,
-      headerRenderer: h,
-      textValue: r,
-      ...x
-    } = e;
+      id: H,
+      headerRenderer: b,
+      textValue: i,
+      ...N
+    } = t;
     return {
-      children: h ? h(r, e) : /* @__PURE__ */ a(W, {
+      children: b ? b(i, t) : /* @__PURE__ */ e(D, {
         as: "span",
-        children: r
+        children: i
       }),
-      isRowHeader: c === "name",
-      id: c,
-      textValue: r,
-      ...x
+      isRowHeader: H === "name",
+      id: H,
+      textValue: i,
+      ...N
     };
   });
-  return s.push(...T), d && s.push({
+  a.push(...A), d && a.push({
     id: "actions",
-    className: i.tableHeaderActions,
-    children: /* @__PURE__ */ a("div", {
-      className: i.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ a(g, {
-        "aria-label": m(f.selectAll),
-        className: i.selectAllCheckbox,
-        isDisabled: o
+    className: s.tableHeaderActions,
+    children: /* @__PURE__ */ e("div", {
+      className: s.tableHeaderActionsWrapper,
+      children: /* @__PURE__ */ e(_, {
+        "aria-label": c(P.selectAll),
+        className: s.selectAllCheckbox,
+        isDisabled: l
       })
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1
-  }), /* @__PURE__ */ D(I, {
-    "aria-label": m(f.listView),
-    selectionBehavior: "toggle",
-    selectionMode: "multiple",
-    ...H,
-    children: [/* @__PURE__ */ a(w, {
-      columns: s,
-      children: (e) => /* @__PURE__ */ a(C, {
-        ...e
+  });
+  const h = {
+    tableHeader: /* @__PURE__ */ e(v, {
+      columns: a,
+      children: (t) => /* @__PURE__ */ e(M, {
+        ...t
+      })
+    }),
+    columns: o,
+    iconColumnVariant: n,
+    isSelectAllEnabled: d,
+    itemActionMenuProps: I,
+    items: m,
+    isLoading: l,
+    formatMessage: c,
+    tableProps: g,
+    columnCount: a.length,
+    zoomLevel: r
+  };
+  return R ? /* @__PURE__ */ e("div", {
+    ref: f,
+    className: s.infiniteScrollTableContainerFullHeight,
+    children: /* @__PURE__ */ e("div", {
+      style: {
+        position: "relative",
+        width: "100%",
+        height: w() + U
+      },
+      children: /* @__PURE__ */ e(T, {
+        ...h,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          transform: `translateY(${((u = p[0]) == null ? void 0 : u.start) || 0}px)`,
+          tableLayout: "fixed"
+        },
+        virtualItems: p
       })
-    }), o ? /* @__PURE__ */ a(N, {
-      columnLength: s.length
-    }) : /* @__PURE__ */ a(y, {
-      columns: l,
-      iconColumnVariant: n,
-      isSelectAllEnabled: d,
-      itemActionMenuProps: u,
-      items: p,
-      zoomLevel: t
-    })]
+    })
+  }) : /* @__PURE__ */ e(T, {
+    ...h
   });
 };
 export {
-  S as default
+  K as default
 };

package/dist/esm/lib/components/metadata-table/table-body/ghost-row/ghost-row.js

@@ -0,0 +1,20 @@
+import { Row as h, Cell as i, Ghost as l } from "@box/blueprint-web";
+import { Size5 as a } from "@box/blueprint-web-assets/tokens/tokens";
+import { jsx as r } from "react/jsx-runtime";
+const c = ({
+  columnLength: o,
+  rowKey: t = "ghost-row"
+}) => /* @__PURE__ */ r(h, {
+  children: Array.from({
+    length: o
+  }, (m, e) => /* @__PURE__ */ r(i, {
+    children: /* @__PURE__ */ r(l, {
+      height: a,
+      variant: "rectangle",
+      width: "100%"
+    })
+  }, e))
+}, t);
+export {
+  c as default
+};

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

@@ -1,27 +1,20 @@
-import { TableBody as a, Row as h, Cell as n, Ghost as m } from "@box/blueprint-web";
-import { Size5 as d } from "@box/blueprint-web-assets/tokens/tokens";
+import { TableBody as a } from "@box/blueprint-web";
+import l from "./ghost-row/ghost-row.js";
 import { jsx as r } from "react/jsx-runtime";
-const s = 20, g = ({
-  columnLength: o,
-  rowLength: l = s
+const s = 20, n = ({
+  columnLength: e,
+  rowLength: t = s
 }) => /* @__PURE__ */ r(a, {
   items: Array.from({
-    length: l
-  }, (e, t) => ({
-    key: t
+    length: t
+  }, (o, m) => ({
+    key: m
   })),
-  children: (e) => /* @__PURE__ */ r(h, {
-    children: Array.from({
-      length: o
-    }, (t, i) => /* @__PURE__ */ r(n, {
-      children: /* @__PURE__ */ r(m, {
-        height: d,
-        variant: "rectangle",
-        width: "100%"
-      })
-    }, i))
-  }, e.key)
+  children: (o) => /* @__PURE__ */ r(l, {
+    columnLength: e,
+    rowKey: o.key
+  })
 });
 export {
-  g as default
+  n as default
 };

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

@@ -1,13 +1,167 @@
-import "@box/blueprint-web";
-import "lodash/get";
-import "react";
-import "@box/item-icon";
-import "clsx";
-import "../../../../../chunks/types.js";
-import "../../constants.js";
-import { T as s } from "../../../../../chunks/table-body-with-data.js";
-import "react/jsx-runtime";
-import "../../item-action-menu/item-action-menu.js";
+import { TableBody as y, Row as L, Cell as a, ActionCell as x, Text as p } from "@box/blueprint-web";
+import { ItemTypeIcon as C } from "@box/item-icon";
+import R from "clsx";
+import N from "lodash/get";
+import d from "react";
+import { I as h } from "../../../../../chunks/types.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as S } from "../../constants.js";
+import b from "./ghost-row/ghost-row.js";
+import { s as m, T as w } from "../../../../../chunks/table-row.js";
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { ItemActionMenu as E } from "../../item-action-menu/item-action-menu.js";
+const g = /* @__PURE__ */ d.memo(({
+  item: t,
+  column: e,
+  iconColumnVariant: o
+}) => {
+  const {
+    id: l,
+    subTitle: c
+  } = e, i = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(a, {
+    children: /* @__PURE__ */ f("div", {
+      className: m.tableNameCell,
+      children: [/* @__PURE__ */ r(C, {
+        item: t
+      }), /* @__PURE__ */ f("div", {
+        className: R({
+          [m.tableNameCellSubTitle]: o === h.INLINE_SUBTITLE
+        }),
+        children: [/* @__PURE__ */ r(p, {
+          as: "span",
+          children: N(t, l)
+        }), o === h.INLINE_SUBTITLE && /* @__PURE__ */ r(p, {
+          as: "span",
+          color: "textOnLightSecondary",
+          children: c
+        })]
+      })]
+    })
+  }, i);
+}), B = /* @__PURE__ */ d.memo(({
+  item: t,
+  column: e
+}) => {
+  var l;
+  const o = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(a, {
+    children: (l = e.cellRenderer) == null ? void 0 : l.call(e, t, e)
+  }, o);
+}), _ = /* @__PURE__ */ d.memo(({
+  item: t,
+  column: e
+}) => {
+  const o = `${e.textValue}-${t.id}`, l = N(t, e.id);
+  return l ? /* @__PURE__ */ r(a, {
+    children: l.join(" ")
+  }, o) : /* @__PURE__ */ r(a, {}, o);
+}), k = /* @__PURE__ */ d.memo(({
+  item: t,
+  column: e
+}) => {
+  const o = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(a, {
+    children: /* @__PURE__ */ r(p, {
+      as: "span",
+      children: N(t, e.id)
+    })
+  }, o);
+}), U = /* @__PURE__ */ d.memo(({
+  item: t,
+  column: e,
+  iconColumnVariant: o
+}) => {
+  const {
+    cellRenderer: l,
+    id: c,
+    type: i
+  } = e;
+  return c === "name" && (o === h.INLINE || o === h.INLINE_SUBTITLE) ? /* @__PURE__ */ r(g, {
+    column: e,
+    iconColumnVariant: o,
+    item: t
+  }) : l ? /* @__PURE__ */ r(B, {
+    column: e,
+    item: t
+  }) : i === "multiSelect" ? /* @__PURE__ */ r(_, {
+    column: e,
+    item: t
+  }) : /* @__PURE__ */ r(k, {
+    column: e,
+    item: t
+  });
+}), W = /* @__PURE__ */ d.memo(({
+  item: t,
+  zoomLevel: e
+}) => /* @__PURE__ */ r(a, {
+  style: {
+    height: S[e]
+  },
+  children: /* @__PURE__ */ r(C, {
+    className: m.iconCell,
+    item: t
+  })
+}, `item-type-icon-${t.id}`)), j = /* @__PURE__ */ d.memo(({
+  item: t,
+  itemActionMenuProps: e
+}) => /* @__PURE__ */ r(x, {
+  children: (o) => e ? /* @__PURE__ */ r(E, {
+    ...e,
+    item: t,
+    onOpenChange: o
+  }) : null
+})), J = ({
+  columns: t,
+  iconColumnVariant: e,
+  isSelectAllEnabled: o,
+  items: l,
+  itemActionMenuProps: c,
+  virtualItems: i,
+  columnCount: T,
+  zoomLevel: u
+}) => {
+  const $ = e === h.COLUMN;
+  if (i) {
+    const n = (s) => /* @__PURE__ */ r(b, {
+      columnLength: T || 0,
+      rowKey: `ghost-${s}`
+    }), I = (s) => /* @__PURE__ */ r(w, {
+      columns: t,
+      iconColumnVariant: e,
+      isSelectAllEnabled: o,
+      item: s,
+      itemActionMenuProps: c,
+      zoomLevel: u
+    });
+    return /* @__PURE__ */ r(y, {
+      items: i,
+      children: ({
+        index: s
+      }) => s >= l.length ? n(s) : I(l[s])
+    });
+  }
+  return /* @__PURE__ */ r(y, {
+    items: l.map((n) => ({
+      key: n.id,
+      ...n
+    })),
+    children: (n) => /* @__PURE__ */ f(L, {
+      className: m.tableRow,
+      id: n.id,
+      children: [$ && /* @__PURE__ */ r(W, {
+        item: n,
+        zoomLevel: u
+      }), t.map((I) => /* @__PURE__ */ r(U, {
+        column: I,
+        iconColumnVariant: e,
+        item: n
+      }, `${I.textValue}-${n.id}`)), o && /* @__PURE__ */ r(j, {
+        item: n,
+        itemActionMenuProps: c
+      })]
+    }, n.id)
+  });
+};
 export {
-  s as default
+  J as default
 };

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

@@ -0,0 +1,12 @@
+import "@box/blueprint-web";
+import "lodash/get";
+import "@box/item-icon";
+import "clsx";
+import "../../../../../../chunks/types.js";
+import "../../../constants.js";
+import { T as l } from "../../../../../../chunks/table-row.js";
+import "react/jsx-runtime";
+import "../../../item-action-menu/item-action-menu.js";
+export {
+  l as default
+};

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

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

package/dist/styles/table-row.css

@@ -0,0 +1 @@
+._tableHeaderActionsWrapper_uw3hc_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_uw3hc_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_uw3hc_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_uw3hc_33:after{height:100%!important}._tableRow_uw3hc_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_uw3hc_42 svg{transform:none!important}._tableNameCell_uw3hc_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubTitle_uw3hc_53{display:flex;flex-direction:column}._infiniteScrollTableContainerFullHeight_uw3hc_58{width:100%;height:100%;overflow:auto}._iconCell_uw3hc_64{width:100%!important;height:100%!important}

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

@@ -0,0 +1,15 @@
+import { Item } from '@box/types';
+type UseInfiniteScrollTableItemsProps = {
+    items: Item[];
+    hasNextPage?: boolean;
+    isLoading?: boolean;
+    parentRef: React.MutableRefObject<HTMLElement | null>;
+    approximateRowHeight?: number;
+    onGetNextPage?: () => void;
+    placeholderRowsCount?: number;
+};
+export declare const useInfiniteScrollTableItems: ({ items, hasNextPage, isLoading, parentRef, approximateRowHeight, onGetNextPage, placeholderRowsCount, }: UseInfiniteScrollTableItemsProps) => {
+    getTableHeight: () => number;
+    virtualItemsToDisplay: import('@tanstack/virtual-core').VirtualItem[];
+};
+export {};

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

@@ -4,7 +4,11 @@ export interface MetadataTableProps extends TableProps, MetadataProps {
     columns: Column[];
     iconColumnVariant?: IconColumnVariant;
     isSelectAllEnabled?: boolean;
+    isInfiniteScrollEnabled?: boolean;
+    hasNextPage?: boolean;
+    onGetNextPage?: () => void;
+    placeholderRowsCount?: number;
     zoomLevel?: number;
 }
-declare const MetadataTable: ({ columns, isLoading, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const MetadataTable: ({ columns, isLoading, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, isInfiniteScrollEnabled, hasNextPage, onGetNextPage, placeholderRowsCount, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTable;

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

@@ -0,0 +1,6 @@
+interface GhostTableRowProps {
+    columnLength: number;
+    rowKey?: string | number;
+}
+declare const GhostTableRow: ({ columnLength, rowKey }: GhostTableRowProps) => import("react/jsx-runtime").JSX.Element;
+export default GhostTableRow;

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

@@ -1,4 +1,9 @@
 import { TableProps } from '@box/blueprint-web';
+import { VirtualItem } from '@tanstack/react-virtual';
 import { MetadataTableProps } from '../metadata-table';
-declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, zoomLevel, }: Omit<MetadataTableProps, keyof TableProps>) => import("react/jsx-runtime").JSX.Element;
+interface TableBodyWithDataProps extends Omit<MetadataTableProps, keyof TableProps> {
+    virtualItems?: VirtualItem[];
+    columnCount?: number;
+}
+declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, virtualItems, columnCount, 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

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

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

@@ -0,0 +1,21 @@
+import { TableProps } from '@box/blueprint-web';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { useIntl } from 'react-intl';
+import { IconColumnVariant, Column, MetadataProps } from '../../types';
+export interface TableRendererProps {
+    tableHeader: React.ReactNode;
+    columns: Column[];
+    iconColumnVariant?: IconColumnVariant;
+    isSelectAllEnabled?: boolean;
+    itemActionMenuProps?: MetadataProps['itemActionMenuProps'];
+    items: MetadataProps['items'];
+    isLoading?: boolean;
+    formatMessage: ReturnType<typeof useIntl>['formatMessage'];
+    tableProps: TableProps;
+    virtualItems?: VirtualItem[];
+    style?: React.CSSProperties;
+    columnCount?: number;
+    zoomLevel?: number;
+}
+declare const TableRenderer: ({ tableHeader, columns, iconColumnVariant, isSelectAllEnabled, itemActionMenuProps, items, isLoading, formatMessage, tableProps, virtualItems, style, columnCount: passedColumnCount, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
+export default TableRenderer;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.27.3",
+    "version": "0.28.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -8,6 +8,7 @@
         "@box/item-icon": "^0.9.172",
         "@box/metadata-filter": "^1.8.4",
         "@box/types": "0.1.0",
+        "@tanstack/react-virtual": "^3.10.8",
         "formik": "^2.4.5",
         "lodash": "^4.17.15",
         "react": "^18.0.0",
@@ -19,10 +20,11 @@
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.60.0",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.16.3",
-        "@box/metadata-filter": "^1.16.3",
+        "@box/item-icon": "^0.16.4",
+        "@box/metadata-filter": "^1.16.4",
         "@box/storybook-utils": "0.13.14",
         "@box/types": "0.2.1",
+        "@tanstack/react-virtual": "^3.10.8",
         "react-intl": "^6.4.2"
     },
     "files": [

package/dist/chunks/table-body-with-data.js

@@ -1,153 +0,0 @@
-import { TableBody as N, Row as y, Cell as n, ActionCell as T, Text as I } from "@box/blueprint-web";
-import C from "lodash/get";
-import s from "react";
-import { ItemTypeIcon as p } from "@box/item-icon";
-import u from "clsx";
-import { I as d } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as f } from "../esm/lib/components/constants.js";
-import { jsx as t, jsxs as b } from "react/jsx-runtime";
-import { ItemActionMenu as x } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/table-body-with-data.css';const S = "_tableHeaderActionsWrapper_rsay7_1", A = "_tableHeaderActions_rsay7_1", L = "_tableRow_rsay7_33", $ = "_selectAllCheckbox_rsay7_42", E = "_tableNameCell_rsay7_47", H = "_tableNameCellSubTitle_rsay7_53", k = "_iconCell_rsay7_58", m = {
-  tableHeaderActionsWrapper: S,
-  tableHeaderActions: A,
-  tableRow: L,
-  selectAllCheckbox: $,
-  tableNameCell: E,
-  tableNameCellSubTitle: H,
-  iconCell: k
-}, R = /* @__PURE__ */ s.memo(({
-  item: l,
-  column: e,
-  iconColumnVariant: r
-}) => {
-  const {
-    id: o,
-    subTitle: c
-  } = e, i = `${e.textValue}-${l.id}`;
-  return /* @__PURE__ */ t(n, {
-    children: /* @__PURE__ */ b("div", {
-      className: m.tableNameCell,
-      children: [/* @__PURE__ */ t(p, {
-        item: l
-      }), /* @__PURE__ */ b("div", {
-        className: u({
-          [m.tableNameCellSubTitle]: r === d.INLINE_SUBTITLE
-        }),
-        children: [/* @__PURE__ */ t(I, {
-          as: "span",
-          children: C(l, o)
-        }), r === d.INLINE_SUBTITLE && /* @__PURE__ */ t(I, {
-          as: "span",
-          color: "textOnLightSecondary",
-          children: c
-        })]
-      })]
-    })
-  }, i);
-}), W = /* @__PURE__ */ s.memo(({
-  item: l,
-  column: e
-}) => {
-  var o;
-  const r = `${e.textValue}-${l.id}`;
-  return /* @__PURE__ */ t(n, {
-    children: (o = e.cellRenderer) == null ? void 0 : o.call(e, l, e)
-  }, r);
-}), w = /* @__PURE__ */ s.memo(({
-  item: l,
-  column: e
-}) => {
-  const r = `${e.textValue}-${l.id}`, o = C(l, e.id);
-  return o ? /* @__PURE__ */ t(n, {
-    children: o.join(" ")
-  }, r) : /* @__PURE__ */ t(n, {}, r);
-}), B = /* @__PURE__ */ s.memo(({
-  item: l,
-  column: e
-}) => {
-  const r = `${e.textValue}-${l.id}`;
-  return /* @__PURE__ */ t(n, {
-    children: /* @__PURE__ */ t(I, {
-      as: "span",
-      children: C(l, e.id)
-    })
-  }, r);
-}), U = /* @__PURE__ */ s.memo(({
-  item: l,
-  column: e,
-  iconColumnVariant: r
-}) => {
-  const {
-    cellRenderer: o,
-    id: c,
-    type: i
-  } = e;
-  return c === "name" && (r === d.INLINE || r === d.INLINE_SUBTITLE) ? /* @__PURE__ */ t(R, {
-    column: e,
-    iconColumnVariant: r,
-    item: l
-  }) : o ? /* @__PURE__ */ t(W, {
-    column: e,
-    item: l
-  }) : i === "multiSelect" ? /* @__PURE__ */ t(w, {
-    column: e,
-    item: l
-  }) : /* @__PURE__ */ t(B, {
-    column: e,
-    item: l
-  });
-}), g = /* @__PURE__ */ s.memo(({
-  item: l,
-  zoomLevel: e
-}) => /* @__PURE__ */ t(n, {
-  style: {
-    height: f[e]
-  },
-  children: /* @__PURE__ */ t(p, {
-    className: m.iconCell,
-    item: l
-  })
-}, `item-type-icon-${l.id}`)), j = /* @__PURE__ */ s.memo(({
-  item: l,
-  itemActionMenuProps: e
-}) => /* @__PURE__ */ t(T, {
-  children: (r) => e ? /* @__PURE__ */ t(x, {
-    ...e,
-    item: l,
-    onOpenChange: r
-  }) : null
-})), J = ({
-  columns: l,
-  iconColumnVariant: e,
-  isSelectAllEnabled: r,
-  items: o,
-  itemActionMenuProps: c,
-  zoomLevel: i
-}) => {
-  const _ = e === d.COLUMN;
-  return /* @__PURE__ */ t(N, {
-    items: o.map((a) => ({
-      key: a.id,
-      ...a
-    })),
-    children: (a) => /* @__PURE__ */ b(y, {
-      className: m.tableRow,
-      id: a.id,
-      children: [_ && /* @__PURE__ */ t(g, {
-        item: a,
-        zoomLevel: i
-      }), l.map((h) => /* @__PURE__ */ t(U, {
-        column: h,
-        iconColumnVariant: e,
-        item: a
-      }, `${h.textValue}-${a.id}`)), r && /* @__PURE__ */ t(j, {
-        item: a,
-        itemActionMenuProps: c
-      })]
-    }, a.id)
-  });
-};
-export {
-  J as T,
-  m as s
-};

package/dist/styles/table-body-with-data.css

@@ -1 +0,0 @@
-._tableHeaderActionsWrapper_rsay7_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_rsay7_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_rsay7_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_rsay7_33:after{height:100%!important}._tableRow_rsay7_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_rsay7_42 svg{transform:none!important}._tableNameCell_rsay7_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubTitle_rsay7_53{display:flex;flex-direction:column}._iconCell_rsay7_58{width:100%!important;height:100%!important}