@box/metadata-view 0.48.10 → 0.48.11

package/dist/chunks/index.js

@@ -1,60 +1,61 @@
-import { Row as L, Cell as a, Text as s, ActionCell as x } from "@box/blueprint-web";
-import I from "lodash/get";
-import { ItemTypeIcon as N } from "@box/item-icon";
+import { Row as L, Cell as o, Text as s, ActionCell as x } from "@box/blueprint-web";
+import N from "lodash/get";
+import { ItemTypeIcon as p } from "@box/item-icon";
 import E from "clsx";
 import { I as n } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as q } from "../esm/lib/components/constants.js";
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { ItemActionMenu as z } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/index.css';const y = "_tableHeaderActionsWrapper_zlqta_1", R = "_tableHeaderActions_zlqta_1", g = "_tableRow_zlqta_33", w = "_selectAllCheckbox_zlqta_42", U = "_tableNameCell_zlqta_47", k = "_tableNameCellSubtitle_zlqta_53", B = "_infiniteScrollTableContainerFullHeight_zlqta_58", W = "_iconCell_zlqta_64", i = {
-  tableHeaderActionsWrapper: y,
-  tableHeaderActions: R,
-  tableRow: g,
-  selectAllCheckbox: w,
-  tableNameCell: U,
-  tableNameCellSubtitle: k,
-  infiniteScrollTableContainerFullHeight: B,
-  iconCell: W
-}, J = ({
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as y } from "../esm/lib/components/constants.js";
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { ItemActionMenu as R } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/index.css';const g = "_tableHeaderActionsWrapper_o1i04_1", w = "_tableHeaderActions_o1i04_1", U = "_tableRow_o1i04_33", k = "_selectAllCheckbox_o1i04_42", B = "_tableNameCell_o1i04_47", W = "_tableNameCellSubtitle_o1i04_53", j = "_tableNameCellIconInline_o1i04_58", F = "_infiniteScrollTableContainerFullHeight_o1i04_62", M = "_iconCell_o1i04_68", r = {
+  tableHeaderActionsWrapper: g,
+  tableHeaderActions: w,
+  tableRow: U,
+  selectAllCheckbox: k,
+  tableNameCell: B,
+  tableNameCellSubtitle: W,
+  tableNameCellIconInline: j,
+  infiniteScrollTableContainerFullHeight: F,
+  iconCell: M
+}, K = ({
   item: l,
   columns: h,
   iconColumnVariant: t,
   isSelectAllEnabled: C,
-  itemActionMenuProps: b,
+  itemActionMenuProps: d,
   zoomLevel: u = 0
-}) => /* @__PURE__ */ d(L, {
-  className: i.tableRow,
+}) => /* @__PURE__ */ b(L, {
+  className: r.tableRow,
   id: l.id,
-  children: [t === n.COLUMN ? /* @__PURE__ */ e(a, {
+  children: [t === n.COLUMN ? /* @__PURE__ */ e(o, {
     style: {
-      height: q[u]
+      height: y[u]
     },
-    children: /* @__PURE__ */ e(N, {
-      className: i.iconCell,
+    children: /* @__PURE__ */ e(p, {
+      className: r.iconCell,
       item: l
     })
-  }, `item-type-icon-${l.id}`) : null, h.map((o) => {
+  }, `item-type-icon-${l.id}`) : null, h.map((a) => {
     const {
       cellRenderer: _,
-      id: r,
+      id: i,
       isItemMetadata: T,
       subtitle: f,
       textValue: S,
       type: H
-    } = o, c = `${S}-${l.id}`, A = T ? r.split(".")[1] : r, m = I(l, A);
-    if (r === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
-      return /* @__PURE__ */ e(a, {
-        children: /* @__PURE__ */ d("div", {
-          className: i.tableNameCell,
-          children: [/* @__PURE__ */ e(N, {
+    } = a, c = `${S}-${l.id}`, A = T ? i.split(".")[1] : i, I = N(l, A);
+    if (i === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
+      return /* @__PURE__ */ e(o, {
+        children: /* @__PURE__ */ b("div", {
+          className: r.tableNameCell,
+          children: [/* @__PURE__ */ e(p, {
             item: l
-          }), /* @__PURE__ */ d("div", {
+          }), /* @__PURE__ */ b("div", {
             className: E({
-              [i.tableNameCellSubtitle]: t === n.INLINE_SUBTITLE
+              [r.tableNameCellSubtitle]: t === n.INLINE_SUBTITLE
             }),
             children: [/* @__PURE__ */ e(s, {
               as: "span",
-              children: m
+              children: I
             }), t === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
               as: "span",
               color: "textOnLightSecondary",
@@ -64,30 +65,30 @@ import '../styles/index.css';const y = "_tableHeaderActionsWrapper_zlqta_1", R =
         })
       }, c);
     if (_)
-      return /* @__PURE__ */ e(a, {
-        children: _(l, o)
+      return /* @__PURE__ */ e(o, {
+        children: _(l, a)
       }, c);
     if (H === "multiSelect") {
-      const p = I(l, r);
-      return /* @__PURE__ */ e(a, {
-        children: p ? p.join(" ") : ""
+      const m = N(l, i);
+      return /* @__PURE__ */ e(o, {
+        children: m ? m.join(" ") : ""
       }, c);
     }
-    return /* @__PURE__ */ e(a, {
+    return /* @__PURE__ */ e(o, {
       children: /* @__PURE__ */ e(s, {
         as: "span",
-        children: m
+        children: I
       })
     }, c);
   }), C && /* @__PURE__ */ e(x, {
-    children: (o) => b ? /* @__PURE__ */ e(z, {
-      ...b,
+    children: (a) => d ? /* @__PURE__ */ e(R, {
+      ...d,
       item: l,
-      onOpenChange: o
+      onOpenChange: a
     }) : null
   })]
 }, l.id);
 export {
-  J as T,
-  i as s
+  K as T,
+  r as s
 };

package/dist/esm/lib/components/action-bar/action-bar.js

@@ -17,7 +17,7 @@ import '../../../../styles/action-bar.css';const b = "_actionBar_dsa2b_1", A = "
   isViewModeButtonDisabled: m,
   onViewModeClick: d,
   onZoomLevelChange: l,
-  sortableColumnNames: f,
+  sortableColumns: f,
   sortDropdownProps: a,
   viewMode: i,
   zoomLevel: w,
@@ -37,7 +37,7 @@ import '../../../../styles/action-bar.css';const b = "_actionBar_dsa2b_1", A = "
       className: t.additionalActions,
       children: [a && /* @__PURE__ */ o(h, {
         ...a,
-        sortableColumnNames: f
+        sortableColumns: f
       }), (c || i === r.GRID) && /* @__PURE__ */ o(R, {
         onZoomLevelChange: l,
         zoomLevel: w

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

@@ -4,12 +4,12 @@ import { useIntl as T } from "react-intl";
 import { V as p } from "../../../../chunks/types.js";
 import { THUMBNAIL_GRID_VIEW_SIZES as E } from "../constants.js";
 import b from "./messages.js";
-import { jsx as e, jsxs as M } from "react/jsx-runtime";
-import { ItemActionMenu as R } from "../item-action-menu/item-action-menu.js";
-import '../../../../styles/metadata-grid.css';const f = "_itemThumbnail_93ess_1", L = {
-  itemThumbnail: f
-}, A = 188, G = 250, g = 8, x = 5, U = (m) => A + G * (g - m) / x, N = ({
-  items: m,
+import { jsx as e, jsxs as R } from "react/jsx-runtime";
+import { ItemActionMenu as f } from "../item-action-menu/item-action-menu.js";
+import '../../../../styles/metadata-grid.css';const L = "_itemThumbnail_93ess_1", M = {
+  itemThumbnail: L
+}, A = 188, G = 250, g = 8, x = 5, U = (r) => A + G * (g - r) / x, N = ({
+  items: r,
   itemActionMenuProps: n,
   zoomLevel: c,
   ...d
@@ -19,38 +19,38 @@ import '../../../../styles/metadata-grid.css';const f = "_itemThumbnail_93ess_1"
   } = T();
   return /* @__PURE__ */ e(i, {
     "aria-label": _(b.gridView),
-    selectionMode: "multiple",
     style: {
       gridTemplateColumns: `repeat(auto-fit, minmax(${U(E[c])}px, 1fr))`
     },
     ...d,
-    children: m.map((t, D) => {
-      var s, l, a;
+    children: r.map((t, D) => {
+      var o, a, l;
       const {
-        name: r,
+        name: m,
         createdAt: u
-      } = t, o = "thumbnailURLs" in t ? ((s = t.thumbnailURLs) == null ? void 0 : s.large) || ((l = t.thumbnailURLs) == null ? void 0 : l.medium) || ((a = t.thumbnailURLs) == null ? void 0 : a.small) : void 0;
-      return /* @__PURE__ */ M(i.Item, {
+      } = t, s = "thumbnailURLs" in t ? ((o = t.thumbnailURLs) == null ? void 0 : o.large) || ((a = t.thumbnailURLs) == null ? void 0 : a.medium) || ((l = t.thumbnailURLs) == null ? void 0 : l.small) : void 0;
+      return /* @__PURE__ */ R(i.Item, {
+        textValue: m,
         children: [/* @__PURE__ */ e(i.Thumbnail, {
-          className: L.itemThumbnail,
-          children: o ? /* @__PURE__ */ e("img", {
-            alt: r,
-            src: o
+          className: M.itemThumbnail,
+          children: s ? /* @__PURE__ */ e("img", {
+            alt: m,
+            src: s
           }) : /* @__PURE__ */ e(h, {
             item: t
           })
         }), /* @__PURE__ */ e(i.Header, {
-          children: r
+          children: m
         }), /* @__PURE__ */ e(i.Subtitle, {
           children: u
-        }), n ? /* @__PURE__ */ e(i.Actions, {
-          children: (I) => /* @__PURE__ */ e(R, {
+        }), /* @__PURE__ */ e(i.Actions, {
+          children: n ? (I) => /* @__PURE__ */ e(f, {
             ...n,
             item: t,
             onOpenChange: I,
             viewMode: p.GRID
-          })
-        }) : null]
+          }) : null
+        })]
       }, t.id);
     })
   });

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

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

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

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

package/dist/esm/lib/components/sort-dropdown/sort-dropdown.js

@@ -1,35 +1,44 @@
-import { DropdownMenu as r, TriggerButton as D } from "@box/blueprint-web";
-import { ArrowUp as f, ArrowDown as l } from "@box/blueprint-web-assets/icons/Fill";
+import { DropdownMenu as e, TriggerButton as w } from "@box/blueprint-web";
+import { ArrowUp as h, ArrowDown as D } from "@box/blueprint-web-assets/icons/Fill";
 import { useState as s } from "react";
-import { jsxs as u, jsx as i } from "react/jsx-runtime";
+import { jsxs as f, jsx as r } from "react/jsx-runtime";
 const S = ({
-  sortableColumnNames: t,
-  initialSortByColumn: g = t[0],
-  initialSortDirection: p = "ascending",
-  onSortChange: c
+  sortableColumns: o,
+  initialSortByColumnId: p = o[0].id,
+  initialSortDirection: m = "ascending",
+  onSortChange: a
 }) => {
-  const [o, a] = s(p), [e, h] = s(g), w = (n) => {
-    if (n === e) {
-      const d = o === "ascending" ? "descending" : "ascending";
-      a(d), c(n, d);
+  const d = new Map(o.map((n) => [n.id, n.textValue])), [t, g] = s(m), [c, u] = s(p), l = (n) => {
+    if (n === c) {
+      const i = t === "ascending" ? "descending" : "ascending";
+      g(i), a({
+        column: n,
+        direction: i
+      });
     } else
-      h(n), a("ascending"), c(n, "ascending");
+      u(n), g("ascending"), a({
+        column: n,
+        direction: "ascending"
+      });
   };
-  return /* @__PURE__ */ u(r.Root, {
-    children: [/* @__PURE__ */ i(r.Trigger, {
-      children: /* @__PURE__ */ i(D, {
-        caretDirection: o === "ascending" ? "up" : "down",
-        label: e,
-        startIcon: o === "ascending" ? f : l,
+  return /* @__PURE__ */ f(e.Root, {
+    children: [/* @__PURE__ */ r(e.Trigger, {
+      children: /* @__PURE__ */ r(w, {
+        caretDirection: t === "ascending" ? "up" : "down",
+        label: d.get(c),
+        startIcon: t === "ascending" ? h : D,
         variant: "tertiary"
       })
-    }), /* @__PURE__ */ i(r.Content, {
-      children: /* @__PURE__ */ i(r.RadioGroup, {
-        onValueChange: w,
-        value: e,
-        children: t.map((n) => /* @__PURE__ */ i(r.RadioSelectItem, {
+    }), /* @__PURE__ */ r(e.Content, {
+      children: /* @__PURE__ */ r(e.RadioGroup, {
+        onValueChange: l,
+        value: d.get(c),
+        children: o.map(({
+          id: n,
+          textValue: i
+        }) => /* @__PURE__ */ r(e.RadioSelectItem, {
           value: n,
-          children: n
+          children: i
         }, n))
       })
     })]

package/dist/esm/lib/metadata-view.js

@@ -1,5 +1,5 @@
-import { I as _, V as o } from "../../chunks/types.js";
-import { ActionBar as x } from "./components/action-bar/action-bar.js";
+import { I as R, V as t } from "../../chunks/types.js";
+import { ActionBar as g } from "./components/action-bar/action-bar.js";
 import "./components/filter-row/filter-row.js";
 import "../../chunks/form-filter-chip.js";
 import "./components/filter-row/metadata-filter-chip.js";
@@ -8,8 +8,8 @@ import "./components/filter-row/predefinedFilters/index.js";
 import "./components/filter-sidepanel/filter.js";
 import "./components/filter-sidepanel/filter-side-panel.js";
 import "./components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as E } from "./components/metadata-grid/metadata-grid.js";
-import { MetadataTable as N } from "./components/metadata-table/metadata-table.js";
+import { MetadataGrid as k } from "./components/metadata-grid/metadata-grid.js";
+import { MetadataTable as x } from "./components/metadata-table/metadata-table.js";
 import "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
 import "./components/metadata-table/table-renderer.js";
 import "./components/metadata-value/metadata-file-chip.js";
@@ -17,84 +17,88 @@ import "./components/metadata-value/metadata-file-field.js";
 import "./components/metadata-value/metadata-location-field.js";
 import "./components/metadata-value/metadata-radio-field.js";
 import "./components/metadata-value/metadata-search-field.js";
-import { Pagination as R } from "./components/pagination/pagination.js";
+import { Pagination as D } from "./components/pagination/pagination.js";
 import "./components/pagination/marker-based-pagination.js";
 import "./components/pagination/offset-based-pagination.js";
 import "./components/pagination/pagination-controls.js";
 import "./components/sort-dropdown/sort-dropdown.js";
-import { SwitchCase as b, Case as a } from "./components/switch-case/switch-case.js";
-import { TooltipProvider as g } from "@box/blueprint-web";
-import { useState as h, useRef as k } from "react";
-import { jsx as t, jsxs as u, Fragment as D } from "react/jsx-runtime";
-import { ErrorState as G } from "./components/error-state/error-state.js";
-import j from "./components/empty-state/empty-state.js";
-import '../../styles/metadata-view.css';const Z = "_container_nykl3_5", z = "_contentContainer_nykl3_14", M = {
+import { SwitchCase as E, Case as a } from "./components/switch-case/switch-case.js";
+import { TooltipProvider as G } from "@box/blueprint-web";
+import { useState as u, useRef as N } from "react";
+import { jsx as o, jsxs as M, Fragment as b } from "react/jsx-runtime";
+import { ErrorState as j } from "./components/error-state/error-state.js";
+import A from "./components/empty-state/empty-state.js";
+import '../../styles/metadata-view.css';const Z = "_container_nykl3_5", z = "_contentContainer_nykl3_14", I = {
   container: Z,
   contentContainer: z
 };
-function ht({
-  actionBarProps: i,
+function Mo({
+  actionBarProps: n,
   columns: c,
-  tableProps: p,
-  hasError: I,
+  tableProps: l,
+  hasError: w,
   onRefresh: S,
-  initialViewMode: V = o.LIST,
-  paginationProps: l,
+  initialViewMode: V = t.LIST,
+  paginationProps: p,
   isLoading: s,
+  isSelectionEnabled: i,
   ...r
 }) {
-  const [e, d] = h(V), [m, w] = h(0), f = k(null), v = () => {
-    e === o.LIST ? d(o.GRID) : d(o.LIST);
-  }, y = !s && r.items.length === 0, L = i && i.sortDropdownProps && c.filter((n) => n.type !== "multiSelect" && n.type !== "enum").map((n) => n.textValue), {
+  const [e, d] = u(V), [m, v] = u(0), f = N(null), y = () => {
+    e === t.LIST ? d(t.GRID) : d(t.LIST);
+  }, L = !s && r.items.length === 0, T = n && n.sortDropdownProps && c.filter((h) => h.type !== "multiSelect" && h.type !== "enum"), {
     iconColumnVariant: C
-  } = p || {}, T = C && C === _.COLUMN;
-  return /* @__PURE__ */ t(g, {
-    children: /* @__PURE__ */ t("div", {
+  } = l || {}, _ = C && C === R.COLUMN;
+  return /* @__PURE__ */ o(G, {
+    children: /* @__PURE__ */ o("div", {
       ref: f,
-      className: M.container,
-      children: I ? /* @__PURE__ */ t(G, {
+      className: I.container,
+      children: w ? /* @__PURE__ */ o(j, {
         onRefresh: S
-      }) : /* @__PURE__ */ u(D, {
-        children: [/* @__PURE__ */ t(x, {
-          ...i,
+      }) : /* @__PURE__ */ M(b, {
+        children: [/* @__PURE__ */ o(g, {
+          ...n,
           containerRef: f,
-          isIconColumnEnabled: T,
-          onViewModeClick: v,
-          onZoomLevelChange: w,
-          sortableColumnNames: L,
+          isIconColumnEnabled: _,
+          onViewModeClick: y,
+          onZoomLevelChange: v,
+          sortableColumns: T,
           viewMode: e,
           zoomLevel: m
-        }), /* @__PURE__ */ t("div", {
-          className: M.contentContainer,
-          children: /* @__PURE__ */ u(b, {
-            children: [/* @__PURE__ */ t(a, {
-              condition: y,
-              children: /* @__PURE__ */ t(j, {})
-            }), /* @__PURE__ */ t(a, {
-              condition: e === o.LIST,
-              children: /* @__PURE__ */ t(N, {
+        }), /* @__PURE__ */ o("div", {
+          className: I.contentContainer,
+          children: /* @__PURE__ */ M(E, {
+            children: [/* @__PURE__ */ o(a, {
+              condition: L,
+              children: /* @__PURE__ */ o(A, {})
+            }), /* @__PURE__ */ o(a, {
+              condition: e === t.LIST,
+              children: /* @__PURE__ */ o(x, {
                 columns: c,
                 isLoading: s,
+                isSelectAllEnabled: i,
+                selectionMode: i ? "multiple" : "none",
                 zoomLevel: m,
                 ...r,
-                ...p
+                ...l
               })
-            }), /* @__PURE__ */ t(a, {
-              condition: e === o.GRID,
-              children: /* @__PURE__ */ t(E, {
+            }), /* @__PURE__ */ o(a, {
+              condition: e === t.GRID,
+              children: /* @__PURE__ */ o(k, {
+                selectionMode: i ? "multiple" : "none",
                 zoomLevel: m,
                 ...r
               })
             })]
           })
-        }), l && /* @__PURE__ */ t(R, {
-          ...l
+        }), p && /* @__PURE__ */ o(D, {
+          ...p
         })]
       })
     })
   });
 }
 export {
-  ht as MetadataView,
-  ht as default
+  Mo as MetadataView,
+  Mo as default
 };

package/dist/styles/index.css

@@ -1 +1 @@
-._tableHeaderActionsWrapper_zlqta_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_zlqta_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_zlqta_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_zlqta_33:after{height:100%!important}._tableRow_zlqta_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_zlqta_42 svg{transform:none!important}._tableNameCell_zlqta_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubtitle_zlqta_53{display:flex;flex-direction:column}._infiniteScrollTableContainerFullHeight_zlqta_58{width:100%;height:100%;overflow:auto}._iconCell_zlqta_64{width:100%!important;height:100%!important}
+._tableHeaderActionsWrapper_o1i04_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_o1i04_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_o1i04_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_o1i04_33:after{height:100%!important}._tableRow_o1i04_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_o1i04_42 svg{transform:none!important}._tableNameCell_o1i04_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubtitle_o1i04_53{display:flex;flex-direction:column}._tableNameCellIconInline_o1i04_58{min-width:var(--size-8)}._infiniteScrollTableContainerFullHeight_o1i04_62{width:100%;height:100%;overflow:auto}._iconCell_o1i04_68{width:100%!important;height:100%!important}

package/dist/types/lib/components/action-bar/action-bar.d.ts

@@ -1,4 +1,4 @@
-import { ViewMode } from '../../types';
+import { Column, ViewMode } from '../../types';
 import { FilterRowProps } from '../filter-row';
 import { SortDropdownProps } from '../sort-dropdown';
 import { FilterGroup } from '../filter-row/types';
@@ -13,7 +13,7 @@ export interface ActionBarProps extends Omit<FilterRowProps, 'filterGroups'> {
     zoomLevel?: number;
 }
 interface ActionBarInternalProps extends ActionBarProps {
-    sortableColumnNames: string[];
+    sortableColumns: Column[];
 }
-export declare const ActionBar: ({ isIconColumnEnabled, isViewModeButtonDisabled, onViewModeClick, onZoomLevelChange, sortableColumnNames, sortDropdownProps, viewMode, zoomLevel, ...rest }: ActionBarInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ActionBar: ({ isIconColumnEnabled, isViewModeButtonDisabled, onViewModeClick, onZoomLevelChange, sortableColumns, sortDropdownProps, viewMode, zoomLevel, ...rest }: ActionBarInternalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/lib/components/sort-dropdown/sort-dropdown.d.ts

@@ -1,11 +1,12 @@
-import { SortDirection } from 'react-aria-components';
+import { SortDescriptor, SortDirection } from 'react-aria-components';
+import { Column } from '../../types';
 export interface SortDropdownProps {
-    initialSortByColumn?: string;
+    initialSortByColumnId?: string;
     initialSortDirection?: SortDirection;
-    onSortChange: (sortByColumn: string, sortDirection: SortDirection) => void;
+    onSortChange: (sortDescriptor: SortDescriptor) => void;
 }
 interface SortDropdownInternalProps extends SortDropdownProps {
-    sortableColumnNames: string[];
+    sortableColumns: Column[];
 }
-export declare const SortDropdown: ({ sortableColumnNames, initialSortByColumn, initialSortDirection, onSortChange, }: SortDropdownInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SortDropdown: ({ sortableColumns, initialSortByColumnId, initialSortDirection, onSortChange, }: SortDropdownInternalProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+import { Selection } from 'react-aria-components';
 import { ActionBarProps, MetadataTableProps, PaginationProps } from './components';
 import { ViewMode, Column, MetadataProps } from './types';
 export interface MetadataViewProps extends MetadataProps {
@@ -6,8 +7,11 @@ export interface MetadataViewProps extends MetadataProps {
     hasError?: boolean;
     initialViewMode?: ViewMode;
     onRefresh?: () => void;
-    tableProps?: Omit<MetadataTableProps, 'columns' | 'items' | 'itemActionMenuProps'>;
+    onSelectionChange?: (keys: Selection) => void;
+    selectedKeys?: 'all' | Iterable<string | number>;
+    isSelectionEnabled?: boolean;
+    tableProps?: Omit<MetadataTableProps, 'columns' | 'isSelectAllEnabled' | 'items' | 'itemActionMenuProps' | 'onSelectionChange' | 'selectedKeys'>;
     paginationProps?: PaginationProps;
 }
-export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, paginationProps, isLoading, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function MetadataView({ actionBarProps, columns, tableProps, hasError, onRefresh, initialViewMode, paginationProps, isLoading, isSelectionEnabled, ...rest }: MetadataViewProps): import("react/jsx-runtime").JSX.Element;
 export default MetadataView;

package/dist/types/lib/test-utils/mock-data.d.ts

@@ -23,7 +23,7 @@ export declare const mockFilterOptionsWithInvalidType: FilterOption[];
 export declare const mockFilterOptionsWithSomeChipsHidden: FilterOption[];
 export declare const mockMetadata: Item[];
 export declare const mockMetadataWithThumbnail: Item[];
-export declare const mockSortableColumnNames: string[];
+export declare const mockSortableColumns: Column[];
 export declare const mockSortDropdownProps: SortDropdownProps;
 export declare const mockFilterGroups: FilterGroup[];
 export declare const mockTypedPaginationPropsMarker: PaginationProps;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.48.10",
+    "version": "0.48.11",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",