@box/metadata-view 0.34.0 → 0.35.1

package/dist/chunks/table-row.js

@@ -1,87 +1,87 @@
-import { Row as S, Cell as c, Text as s, ActionCell as H } from "@box/blueprint-web";
+import { Row as H, Cell as a, Text as s, ActionCell as L } from "@box/blueprint-web";
 import b from "lodash/get";
-import { ItemTypeIcon as m } from "@box/item-icon";
-import L from "clsx";
+import { ItemTypeIcon as p } from "@box/item-icon";
+import A from "clsx";
 import { I as n } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as A } from "../esm/lib/components/constants.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as x } 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 = ({
+import { ItemActionMenu as E } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/table-row.css';const q = "_tableHeaderActionsWrapper_zlqta_1", z = "_tableHeaderActions_zlqta_1", y = "_tableRow_zlqta_33", R = "_selectAllCheckbox_zlqta_42", g = "_tableNameCell_zlqta_47", w = "_tableNameCellSubtitle_zlqta_53", U = "_infiniteScrollTableContainerFullHeight_zlqta_58", k = "_iconCell_zlqta_64", i = {
+  tableHeaderActionsWrapper: q,
+  tableHeaderActions: z,
+  tableRow: y,
+  selectAllCheckbox: R,
+  tableNameCell: g,
+  tableNameCellSubtitle: w,
+  infiniteScrollTableContainerFullHeight: U,
+  iconCell: k
+}, G = ({
   item: l,
-  columns: N,
+  columns: h,
   iconColumnVariant: t,
-  isSelectAllEnabled: p,
+  isSelectAllEnabled: I,
   itemActionMenuProps: d,
-  zoomLevel: I = 0
+  zoomLevel: u = 0
 }) => {
-  const T = I;
-  return /* @__PURE__ */ _(S, {
+  const C = u;
+  return /* @__PURE__ */ _(H, {
     className: i.tableRow,
     id: l.id,
-    children: [t === n.COLUMN ? /* @__PURE__ */ e(c, {
+    children: [t === n.COLUMN ? /* @__PURE__ */ e(a, {
       style: {
-        height: A[T]
+        height: x[C]
       },
-      children: /* @__PURE__ */ e(m, {
+      children: /* @__PURE__ */ e(p, {
         className: i.iconCell,
         item: l
       })
-    }, `item-type-icon-${l.id}`) : null, N.map((o) => {
+    }, `item-type-icon-${l.id}`) : null, h.map((o) => {
       const {
-        cellRenderer: h,
-        id: a,
-        subTitle: C,
+        cellRenderer: m,
+        id: r,
+        subtitle: T,
         textValue: f,
-        type: w
-      } = o, r = `${f}-${l.id}`;
-      if (a === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
-        return /* @__PURE__ */ e(c, {
+        type: S
+      } = o, c = `${f}-${l.id}`;
+      if (r === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
+        return /* @__PURE__ */ e(a, {
           children: /* @__PURE__ */ _("div", {
             className: i.tableNameCell,
-            children: [/* @__PURE__ */ e(m, {
+            children: [/* @__PURE__ */ e(p, {
               item: l
             }), /* @__PURE__ */ _("div", {
-              className: L({
-                [i.tableNameCellSubTitle]: t === n.INLINE_SUBTITLE
+              className: A({
+                [i.tableNameCellSubtitle]: t === n.INLINE_SUBTITLE
               }),
               children: [/* @__PURE__ */ e(s, {
                 as: "span",
-                children: b(l, a)
+                children: b(l, r)
               }), t === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
                 as: "span",
                 color: "textOnLightSecondary",
-                children: C
+                children: T
               }) : 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);
+        }, c);
+      if (m)
+        return /* @__PURE__ */ e(a, {
+          children: m(l, o)
+        }, c);
+      if (S === "multiSelect") {
+        const N = b(l, r);
+        return /* @__PURE__ */ e(a, {
+          children: N ? N.join(" ") : ""
+        }, c);
       }
-      return /* @__PURE__ */ e(c, {
+      return /* @__PURE__ */ e(a, {
         children: /* @__PURE__ */ e(s, {
           as: "span",
-          children: b(l, a)
+          children: b(l, r)
         })
-      }, r);
-    }), p && /* @__PURE__ */ e(H, {
-      children: (o) => d ? /* @__PURE__ */ e(x, {
+      }, c);
+    }), I && /* @__PURE__ */ e(L, {
+      children: (o) => d ? /* @__PURE__ */ e(E, {
         ...d,
         item: l,
         onOpenChange: o
@@ -90,6 +90,6 @@ import '../styles/table-row.css';const E = "_tableHeaderActionsWrapper_uw3hc_1",
   }, l.id);
 };
 export {
-  q as T,
+  G as T,
   i as s
 };

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

@@ -1,14 +1,14 @@
-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 { useRef as v } from "react";
+import { useIntl as M } from "react-intl";
+import { Text as E, ListCheckbox as S, TableHeader as k, Column as B } from "@box/blueprint-web";
+import { useInfiniteScrollTableItems as O } 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 { I as P } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as U } from "../constants.js";
 import { s } from "../../../../chunks/table-row.js";
-import P from "./messages.js";
+import j from "./messages.js";
 import { jsx as e } from "react/jsx-runtime";
-const U = 40, K = ({
+const F = 40, Q = ({
   columns: o,
   isLoading: l = !1,
   iconColumnVariant: n,
@@ -17,28 +17,29 @@ const U = 40, K = ({
   itemActionMenuProps: I,
   isInfiniteScrollEnabled: R = !1,
   hasNextPage: x = !1,
-  onGetNextPage: C,
-  placeholderRowsCount: W,
+  onInlineEditChange: C,
+  onGetNextPage: W,
+  placeholderRowsCount: g,
   zoomLevel: r,
-  ...g
+  ...w
 }) => {
   var u;
   const {
     formatMessage: c
-  } = S(), f = E(null), {
+  } = M(), f = v(null), {
     virtualItemsToDisplay: p,
-    getTableHeight: w
-  } = k({
+    getTableHeight: y
+  } = O({
     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;
+    onGetNextPage: W,
+    placeholderRowsCount: g
+  }), a = [], A = 0;
+  if (n === P.COLUMN) {
+    r = r || A;
+    const t = parseInt(U[r], 10) + 24;
     a.push({
       id: "item-type-icon",
       isRowHeader: !1,
@@ -47,31 +48,31 @@ const U = 40, K = ({
       maxWidth: t
     });
   }
-  const A = o.map((t) => {
+  const N = o.map((t) => {
     const {
       id: H,
       headerRenderer: b,
       textValue: i,
-      ...N
+      ..._
     } = t;
     return {
-      children: b ? b(i, t) : /* @__PURE__ */ e(D, {
+      children: b ? b(i, t) : /* @__PURE__ */ e(E, {
         as: "span",
         children: i
       }),
       isRowHeader: H === "name",
       id: H,
       textValue: i,
-      ...N
+      ..._
     };
   });
-  a.push(...A), d && a.push({
+  a.push(...N), d && a.push({
     id: "actions",
     className: s.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
       className: s.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(_, {
-        "aria-label": c(P.selectAll),
+      children: /* @__PURE__ */ e(S, {
+        "aria-label": c(j.selectAll),
         className: s.selectAllCheckbox,
         isDisabled: l
       })
@@ -80,22 +81,23 @@ const U = 40, K = ({
     hideHeader: !1,
     allowsSorting: !1
   });
-  const h = {
-    tableHeader: /* @__PURE__ */ e(v, {
-      columns: a,
-      children: (t) => /* @__PURE__ */ e(M, {
-        ...t
-      })
-    }),
+  const D = /* @__PURE__ */ e(k, {
+    columns: a,
+    children: (t) => /* @__PURE__ */ e(B, {
+      ...t
+    })
+  }), h = {
+    columnCount: a.length,
     columns: o,
+    formatMessage: c,
     iconColumnVariant: n,
+    isLoading: l,
     isSelectAllEnabled: d,
     itemActionMenuProps: I,
     items: m,
-    isLoading: l,
-    formatMessage: c,
-    tableProps: g,
-    columnCount: a.length,
+    onInlineEditChange: C,
+    tableHeader: D,
+    tableProps: w,
     zoomLevel: r
   };
   return R ? /* @__PURE__ */ e("div", {
@@ -105,7 +107,7 @@ const U = 40, K = ({
       style: {
         position: "relative",
         width: "100%",
-        height: w() + U
+        height: y() + F
       },
       children: /* @__PURE__ */ e(T, {
         ...h,
@@ -125,5 +127,5 @@ const U = 40, K = ({
   });
 };
 export {
-  K as default
+  Q as default
 };

package/dist/esm/lib/components/metadata-table/table-body/inline-editing-cell/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./inline-editing-cell.js";
+export {
+  o as default
+};

package/dist/esm/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js

@@ -0,0 +1,37 @@
+import { Cell as c, DropdownMenu as l, Button as a } from "@box/blueprint-web";
+import { CaretDown as g } from "@box/blueprint-web-assets/icons/Fill";
+import h from "lodash/get";
+import { jsx as t, jsxs as C } from "react/jsx-runtime";
+import '../../../../../../styles/inline-editing-cell.css';const E = "_inlineEditingCell_1xsiq_1", p = {
+  inlineEditingCell: E
+}, I = ({
+  column: n,
+  item: d,
+  onInlineEditChange: r
+}) => {
+  const s = `${n.id}-${d.id}`, e = h(d, n.id) || "--", o = (i, f) => {
+    r(d, i, n.id);
+  };
+  return /* @__PURE__ */ t(c, {
+    children: /* @__PURE__ */ C(l.Root, {
+      children: [/* @__PURE__ */ t(l.Trigger, {
+        children: /* @__PURE__ */ t(a, {
+          className: p.inlineEditingCell,
+          icon: g,
+          variant: "secondary",
+          children: e
+        })
+      }), /* @__PURE__ */ t(l.Content, {
+        align: "start",
+        children: n.inlineEditingOptions && n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(l.CheckboxItem, {
+          checked: e === i || (e == null ? void 0 : e.includes(i)),
+          onSelect: () => o(i, n.id),
+          children: i
+        }, i))
+      })]
+    })
+  }, s);
+};
+export {
+  I as default
+};

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

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

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

@@ -1,10 +1,10 @@
-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 = ({
+import { Table as T } from "@box/blueprint-web";
+import d from "./table-body/ghost-table-body.js";
+import x from "./table-body/table-body-with-data.js";
+import { I as B } from "../../../../chunks/types.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,
@@ -17,21 +17,22 @@ const N = ({
   virtualItems: o,
   style: h,
   columnCount: p,
-  zoomLevel: C
+  zoomLevel: C,
+  onInlineEditChange: g
 }) => {
   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),
+    return n === B.COLUMN && (e += 1), r && (e += 1), e;
+  })(), b = l && !(o != null && o.length);
+  return /* @__PURE__ */ y(T, {
+    "aria-label": u(j.listView),
     selectionBehavior: "toggle",
     selectionMode: "multiple",
     style: h,
     ...a,
-    children: [s, g ? /* @__PURE__ */ i(T, {
+    children: [s, b ? /* @__PURE__ */ i(d, {
       columnLength: m
-    }) : /* @__PURE__ */ i(d, {
+    }) : /* @__PURE__ */ i(x, {
       columnCount: m,
       columns: t,
       iconColumnVariant: n,
@@ -39,11 +40,12 @@ const N = ({
       isSelectAllEnabled: r,
       itemActionMenuProps: c,
       items: f,
+      onInlineEditChange: g,
       virtualItems: o,
       zoomLevel: C
     })]
   });
 };
 export {
-  N as default
+  O as default
 };

package/dist/styles/inline-editing-cell.css

@@ -0,0 +1 @@
+._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1{display:inline-flex;gap:var(--space-2);align-items:center;padding:var(--space-1);font-weight:var(--font-weights-regular);background-color:transparent;border:transparent}._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1:hover{background-color:transparent;border:transparent}

package/dist/styles/table-row.css

@@ -1 +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}
+._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}

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

@@ -1,7 +1,7 @@
 import { ViewMode } from '../../types';
 import { FilterRowProps } from '../filter-row';
-import { FilterGroup } from '../filter-row/types';
 import { SortDropdownProps } from './sort-dropdown';
+import { FilterGroup } from '../filter-row/types';
 export interface ActionBarProps extends Omit<FilterRowProps, 'filterGroups'> {
     filterGroups?: FilterGroup[];
     isIconColumnEnabled?: boolean;

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

@@ -1,4 +1,5 @@
 import { TableProps } from '@box/blueprint-web';
+import { Item } from '@box/types';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
 export interface MetadataTableProps extends TableProps, MetadataProps {
     columns: Column[];
@@ -7,8 +8,9 @@ export interface MetadataTableProps extends TableProps, MetadataProps {
     isInfiniteScrollEnabled?: boolean;
     hasNextPage?: boolean;
     onGetNextPage?: () => void;
+    onInlineEditChange?: (item: Item, value: string, columnId: string) => void;
     placeholderRowsCount?: number;
     zoomLevel?: number;
 }
-declare const MetadataTable: ({ columns, isLoading, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, isInfiniteScrollEnabled, hasNextPage, onGetNextPage, placeholderRowsCount, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const MetadataTable: ({ columns, isLoading, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, isInfiniteScrollEnabled, hasNextPage, onInlineEditChange, onGetNextPage, placeholderRowsCount, zoomLevel, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTable;

package/dist/types/lib/components/metadata-table/table-body/inline-editing-cell/index.d.ts

@@ -0,0 +1 @@
+export { default } from './inline-editing-cell';

package/dist/types/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.d.ts

@@ -0,0 +1,9 @@
+import { Item } from '@box/types';
+import { Column } from '../../../../types';
+interface InlineEditingCellProps {
+    column: Column;
+    item: Item;
+    onInlineEditChange: (item: Item, value: string, columnId: string) => void;
+}
+declare const InlineEditingCell: ({ column, item, onInlineEditChange }: InlineEditingCellProps) => import("react/jsx-runtime").JSX.Element;
+export default InlineEditingCell;

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

@@ -1,9 +1,20 @@
 import { TableProps } from '@box/blueprint-web';
+import { Item } from '@box/types';
 import { VirtualItem } from '@tanstack/react-virtual';
+import { IconColumnVariant, Column } from '../../../types';
 import { MetadataTableProps } from '../metadata-table';
 interface TableBodyWithDataProps extends Omit<MetadataTableProps, keyof TableProps> {
     virtualItems?: VirtualItem[];
     columnCount?: number;
+    onInlineEditChange?: (item: Item, value: string, columnId: string) => void;
 }
-declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, virtualItems, columnCount, zoomLevel, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
+type CellProps = {
+    item: Item;
+    column: Column;
+    iconColumnVariant: IconColumnVariant;
+};
+export interface DataCellProps extends CellProps {
+    onInlineEditChange?: (item: Item, value: string, columnId: string) => void;
+}
+declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, virtualItems, columnCount, zoomLevel, onInlineEditChange, }: TableBodyWithDataProps) => import("react/jsx-runtime").JSX.Element;
 export default TableBodyWithData;

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

@@ -1,6 +1,7 @@
-import { TableProps } from '@box/blueprint-web';
 import { VirtualItem } from '@tanstack/react-virtual';
 import { useIntl } from 'react-intl';
+import { TableProps } from '@box/blueprint-web';
+import { Item } from '@box/types';
 import { IconColumnVariant, Column, MetadataProps } from '../../types';
 export interface TableRendererProps {
     tableHeader: React.ReactNode;
@@ -16,6 +17,7 @@ export interface TableRendererProps {
     style?: React.CSSProperties;
     columnCount?: number;
     zoomLevel?: number;
+    onInlineEditChange?: (item: Item, value: string, columnId: string) => void;
 }
-declare const TableRenderer: ({ tableHeader, columns, iconColumnVariant, isSelectAllEnabled, itemActionMenuProps, items, isLoading, formatMessage, tableProps, virtualItems, style, columnCount: passedColumnCount, zoomLevel, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
+declare const TableRenderer: ({ tableHeader, columns, iconColumnVariant, isSelectAllEnabled, itemActionMenuProps, items, isLoading, formatMessage, tableProps, virtualItems, style, columnCount: passedColumnCount, zoomLevel, onInlineEditChange, }: TableRendererProps) => import("react/jsx-runtime").JSX.Element;
 export default TableRenderer;

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

@@ -8,7 +8,8 @@ export interface Column extends Partial<ColumnProps> {
     headerRenderer?: (name: string, column: Column) => React.ReactNode | undefined;
     id: string;
     isInlineEditingEnabled?: boolean;
-    subTitle?: string;
+    inlineEditingOptions?: string[];
+    subtitle?: string;
     textValue?: string;
     type?: MetadataFieldType;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.34.0",
+    "version": "0.35.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -20,7 +20,7 @@
     "devDependencies": {
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.62.0",
-        "@box/box-item-type-selector": "^0.62.3",
+        "@box/box-item-type-selector": "^0.63.0",
         "@box/eslint-plugin-blueprint": "*",
         "@box/item-icon": "^0.17.3",
         "@box/metadata-filter": "^1.18.0",