@box/metadata-view 0.48.17 → 0.48.18

package/dist/chunks/index.js

@@ -1,21 +1,21 @@
-import { Row as L, Cell as o, Text as s, ActionCell as x } from "@box/blueprint-web";
+import { Row as L, Cell as n, 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 y } from "../esm/lib/components/constants.js";
+import q from "clsx";
+import { I as a } from "./types.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as E } 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
+import { ItemActionMenu as y } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/index.css';const R = "_tableHeaderActionsWrapper_169qr_1", g = "_tableHeaderActions_169qr_1", w = "_tableRow_169qr_33", U = "_selectAllCheckbox_169qr_42", k = "_tableNameCell_169qr_47", B = "_tableNameCellSubtitle_169qr_53", W = "_tableNameCellIconInline_169qr_58", j = "_infiniteScrollTableContainerFullHeight_169qr_62", F = "_iconCell_169qr_68", i = {
+  tableHeaderActionsWrapper: R,
+  tableHeaderActions: g,
+  tableRow: w,
+  selectAllCheckbox: U,
+  tableNameCell: k,
+  tableNameCellSubtitle: B,
+  tableNameCellIconInline: W,
+  infiniteScrollTableContainerFullHeight: j,
+  iconCell: F
 }, K = ({
   item: l,
   columns: h,
@@ -24,39 +24,39 @@ import '../styles/index.css';const g = "_tableHeaderActionsWrapper_o1i04_1", w =
   itemActionMenuProps: d,
   zoomLevel: u = 0
 }) => /* @__PURE__ */ b(L, {
-  className: r.tableRow,
+  className: i.tableRow,
   id: l.id,
-  children: [t === n.COLUMN ? /* @__PURE__ */ e(o, {
+  children: [t === a.COLUMN ? /* @__PURE__ */ e(n, {
     style: {
-      height: y[u]
+      height: E[u]
     },
     children: /* @__PURE__ */ e(p, {
-      className: r.iconCell,
+      className: i.iconCell,
       item: l
     })
-  }, `item-type-icon-${l.id}`) : null, h.map((a) => {
+  }, `item-type-icon-${l.id}`) : null, h.map((r) => {
     const {
       cellRenderer: _,
-      id: i,
+      id: o,
       isItemMetadata: T,
       subtitle: f,
       textValue: S,
       type: H
-    } = 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, {
+    } = r, c = `${S}-${l.id}`, A = T ? o.split(".")[1] : o, I = N(l, A);
+    if (o === "name" && (t === a.INLINE || t === a.INLINE_SUBTITLE))
+      return /* @__PURE__ */ e(n, {
         children: /* @__PURE__ */ b("div", {
-          className: r.tableNameCell,
+          className: i.tableNameCell,
           children: [/* @__PURE__ */ e(p, {
             item: l
           }), /* @__PURE__ */ b("div", {
-            className: E({
-              [r.tableNameCellSubtitle]: t === n.INLINE_SUBTITLE
+            className: q({
+              [i.tableNameCellSubtitle]: t === a.INLINE_SUBTITLE
             }),
             children: [/* @__PURE__ */ e(s, {
               as: "span",
               children: I
-            }), t === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
+            }), t === a.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
               as: "span",
               color: "textOnLightSecondary",
               children: f
@@ -65,30 +65,30 @@ import '../styles/index.css';const g = "_tableHeaderActionsWrapper_o1i04_1", w =
         })
       }, c);
     if (_)
-      return /* @__PURE__ */ e(o, {
-        children: _(l, a)
+      return /* @__PURE__ */ e(n, {
+        children: _(l, r)
       }, c);
     if (H === "multiSelect") {
-      const m = N(l, i);
-      return /* @__PURE__ */ e(o, {
+      const m = N(l, o);
+      return /* @__PURE__ */ e(n, {
         children: m ? m.join(" ") : ""
       }, c);
     }
-    return /* @__PURE__ */ e(o, {
+    return /* @__PURE__ */ e(n, {
       children: /* @__PURE__ */ e(s, {
         as: "span",
         children: I
       })
     }, c);
   }), C && /* @__PURE__ */ e(x, {
-    children: (a) => d ? /* @__PURE__ */ e(R, {
+    children: (r) => d ? /* @__PURE__ */ e(y, {
       ...d,
       item: l,
-      onOpenChange: a
+      onOpenChange: r
     }) : null
   })]
 }, l.id);
 export {
   K as T,
-  r as s
+  i as s
 };

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

@@ -1,52 +1,52 @@
-import { Button as B } from "@box/blueprint-web";
-import { Grid as p } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as u } from "react-intl";
+import { Button as v } from "@box/blueprint-web";
+import { Grid as B } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as p } from "react-intl";
 import { V as r } from "../../../../chunks/types.js";
-import { ZoomButton as R } from "./zoom-button.js";
+import { ZoomButton as b } from "./zoom-button.js";
 import s from "./messages.js";
 import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import { FilterRow as v } from "../filter-row/filter-row.js";
-import { SortDropdown as h } from "../sort-dropdown/sort-dropdown.js";
-import '../../../../styles/action-bar.css';const b = "_actionBar_dsa2b_1", A = "_filterRow_dsa2b_8", C = "_additionalActions_dsa2b_13", G = "_viewModeButtonContainer_dsa2b_24", t = {
-  actionBar: b,
-  filterRow: A,
-  additionalActions: C,
-  viewModeButtonContainer: G
+import { FilterRow as u } from "../filter-row/filter-row.js";
+import { SortDropdown as R } from "../sort-dropdown/sort-dropdown.js";
+import '../../../../styles/action-bar.css';const x = "_actionBar_bbxsv_1", h = "_filterRow_bbxsv_8", A = "_additionalActions_bbxsv_13", C = "_viewModeButtonContainer_bbxsv_24", t = {
+  actionBar: x,
+  filterRow: h,
+  additionalActions: A,
+  viewModeButtonContainer: C
 }, T = ({
   isIconColumnEnabled: c,
   isViewModeButtonDisabled: m,
-  onViewModeClick: d,
-  onZoomLevelChange: l,
+  onViewModeClick: l,
+  onZoomLevelChange: d,
   sortableColumns: f,
-  sortDropdownProps: a,
+  sortDropdownProps: n,
   viewMode: i,
   zoomLevel: w,
   ..._
 }) => {
   const {
-    formatMessage: n
-  } = u();
+    formatMessage: a
+  } = p();
   return /* @__PURE__ */ e("div", {
     className: t.actionBar,
     children: [/* @__PURE__ */ o("div", {
       className: t.filterRow,
-      children: /* @__PURE__ */ o(v, {
+      children: /* @__PURE__ */ o(u, {
         ..._
       })
     }), /* @__PURE__ */ e("div", {
       className: t.additionalActions,
-      children: [a && /* @__PURE__ */ o(h, {
-        ...a,
+      children: [n && /* @__PURE__ */ o(R, {
+        ...n,
         sortableColumns: f
-      }), (c || i === r.GRID) && /* @__PURE__ */ o(R, {
-        onZoomLevelChange: l,
+      }), (c || i === r.GRID) && /* @__PURE__ */ o(b, {
+        onZoomLevelChange: d,
         zoomLevel: w
       }), !m && /* @__PURE__ */ o("div", {
         className: t.viewModeButtonContainer,
-        children: /* @__PURE__ */ o(B, {
-          "aria-label": i === r.GRID ? n(s.switchToListView) : n(s.switchToGridView),
-          icon: p,
-          onClick: d,
+        children: /* @__PURE__ */ o(v, {
+          "aria-label": i === r.GRID ? a(s.switchToListView) : a(s.switchToGridView),
+          icon: B,
+          onClick: l,
           variant: i === r.GRID ? "primary" : "tertiary"
         })
       })]

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

@@ -1,19 +1,19 @@
-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 { TableBody as T, Row as b, Cell as I, ActionCell as S, Text as N } 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 f } from "../../../../../chunks/types.js";
 import { THUMBNAIL_LIST_VIEW_HEIGHTS as x } from "../../constants.js";
-import { s as N, T as R } from "../../../../../chunks/index.js";
+import { s as h, 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 $ = (t, e, l) => {
+const E = (t, e, l) => {
   const n = l ? e.split(".")[1] : e;
-  return L(t, n);
-}, U = /* @__PURE__ */ I.memo(({
+  return $(t, n);
+}, k = /* @__PURE__ */ c.memo(({
   item: t,
   column: e,
   iconColumnVariant: l
@@ -22,49 +22,47 @@ const $ = (t, e, l) => {
     id: n,
     isItemMetadata: s,
     subtitle: i,
-    textValue: h
-  } = e, d = `${h}-${t.id}`;
-  return /* @__PURE__ */ r(m, {
+    textValue: m
+  } = e, a = `${m}-${t.id}`;
+  return /* @__PURE__ */ r(I, {
     children: /* @__PURE__ */ u("div", {
-      className: N.tableNameCell,
-      children: [/* @__PURE__ */ r(E, {
-        className: y({
-          [N.tableNameCellIconInline]: [c.INLINE_SUBTITLE, c.INLINE].includes(l)
-        }),
+      className: h.tableNameCell,
+      children: [/* @__PURE__ */ r(y, {
+        className: h.tableNameCellIconInline,
         item: t
       }), /* @__PURE__ */ u("div", {
-        className: y({
-          [N.tableNameCellSubtitle]: l === c.INLINE_SUBTITLE
+        className: g({
+          [h.tableNameCellSubtitle]: l === f.INLINE_SUBTITLE
         }),
-        children: [/* @__PURE__ */ r(p, {
+        children: [/* @__PURE__ */ r(N, {
           as: "span",
-          children: $(t, n, s)
-        }), l === c.INLINE_SUBTITLE && /* @__PURE__ */ r(p, {
+          children: E(t, n, s)
+        }), l === f.INLINE_SUBTITLE && /* @__PURE__ */ r(N, {
           as: "span",
           color: "textOnLightSecondary",
           children: i
         })]
       })]
     })
-  }, d);
-}), k = /* @__PURE__ */ I.memo(({
+  }, a);
+}), M = /* @__PURE__ */ c.memo(({
   item: t,
   column: e
 }) => {
   var n;
   const l = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(m, {
+  return /* @__PURE__ */ r(I, {
     children: (n = e.cellRenderer) == null ? void 0 : n.call(e, t, e)
   }, l);
-}), M = /* @__PURE__ */ I.memo(({
+}), U = /* @__PURE__ */ c.memo(({
   item: t,
   column: e
 }) => {
-  const l = `${e.textValue}-${t.id}`, n = L(t, e.id);
-  return n ? /* @__PURE__ */ r(m, {
+  const l = `${e.textValue}-${t.id}`, n = $(t, e.id);
+  return n ? /* @__PURE__ */ r(I, {
     children: n.join(" ")
-  }, l) : /* @__PURE__ */ r(m, {}, l);
-}), W = /* @__PURE__ */ I.memo(({
+  }, l) : /* @__PURE__ */ r(I, {}, l);
+}), W = /* @__PURE__ */ c.memo(({
   item: t,
   column: e
 }) => {
@@ -73,13 +71,13 @@ const $ = (t, e, l) => {
     isItemMetadata: n,
     textValue: s
   } = e, i = `${s}-${t.id}`;
-  return /* @__PURE__ */ r(m, {
-    children: /* @__PURE__ */ r(p, {
+  return /* @__PURE__ */ r(I, {
+    children: /* @__PURE__ */ r(N, {
       as: "span",
-      children: $(t, l, n)
+      children: E(t, l, n)
     })
   }, i);
-}), j = /* @__PURE__ */ I.memo(({
+}), j = /* @__PURE__ */ c.memo(({
   item: t,
   column: e,
   iconColumnVariant: l,
@@ -88,42 +86,42 @@ const $ = (t, e, l) => {
   const {
     cellRenderer: s,
     id: i,
-    isInlineEditingEnabled: h,
-    type: d
+    isInlineEditingEnabled: m,
+    type: a
   } = e;
-  return i === "item.name" && (l === c.INLINE || l === c.INLINE_SUBTITLE) ? /* @__PURE__ */ r(U, {
+  return i === "item.name" && (l === f.INLINE || l === f.INLINE_SUBTITLE) ? /* @__PURE__ */ r(k, {
     column: e,
     iconColumnVariant: l,
     item: t
-  }) : s ? /* @__PURE__ */ r(k, {
+  }) : s ? /* @__PURE__ */ r(M, {
     column: e,
     item: t
-  }) : h && (d === "multiSelect" || d === "enum") ? /* @__PURE__ */ r(w, {
+  }) : m && (a === "multiSelect" || a === "enum") ? /* @__PURE__ */ r(w, {
     column: e,
     item: t,
     onInlineEditChange: n
-  }, `${e.id}-${t.id}`) : d === "multiSelect" ? /* @__PURE__ */ r(M, {
+  }, `${e.id}-${t.id}`) : a === "multiSelect" ? /* @__PURE__ */ r(U, {
     column: e,
     item: t
   }) : /* @__PURE__ */ r(W, {
     column: e,
     item: t
   });
-}), D = /* @__PURE__ */ I.memo(({
+}), D = /* @__PURE__ */ c.memo(({
   item: t,
   zoomLevel: e
-}) => /* @__PURE__ */ r(m, {
+}) => /* @__PURE__ */ r(I, {
   style: {
     height: x[e]
   },
-  children: /* @__PURE__ */ r(E, {
-    className: N.iconCell,
+  children: /* @__PURE__ */ r(y, {
+    className: h.iconCell,
     item: t
   })
-}, `item-type-icon-${t.id}`)), G = /* @__PURE__ */ I.memo(({
+}, `item-type-icon-${t.id}`)), G = /* @__PURE__ */ c.memo(({
   item: t,
   itemActionMenuProps: e
-}) => /* @__PURE__ */ r(g, {
+}) => /* @__PURE__ */ r(S, {
   children: (l) => e ? /* @__PURE__ */ r(B, {
     ...e,
     item: t,
@@ -136,47 +134,47 @@ const $ = (t, e, l) => {
   items: n,
   itemActionMenuProps: s,
   virtualItems: i,
-  columnCount: h,
-  zoomLevel: d,
-  onInlineEditChange: T
+  columnCount: m,
+  zoomLevel: a,
+  onInlineEditChange: C
 }) => {
-  const S = e === c.COLUMN;
+  const L = e === f.COLUMN;
   if (i) {
-    const o = (a) => /* @__PURE__ */ r(_, {
-      columnLength: h || 0,
-      rowKey: `ghost-${a}`
-    }), f = (a) => /* @__PURE__ */ r(R, {
+    const o = (d) => /* @__PURE__ */ r(_, {
+      columnLength: m || 0,
+      rowKey: `ghost-${d}`
+    }), p = (d) => /* @__PURE__ */ r(R, {
       columns: t,
       iconColumnVariant: e,
       isSelectAllEnabled: l,
-      item: a,
+      item: d,
       itemActionMenuProps: s,
-      zoomLevel: d
+      zoomLevel: a
     });
-    return /* @__PURE__ */ r(C, {
+    return /* @__PURE__ */ r(T, {
       items: i,
       children: ({
-        index: a
-      }) => a >= n.length ? o(a) : f(n[a])
+        index: d
+      }) => d >= n.length ? o(d) : p(n[d])
     });
   }
-  return /* @__PURE__ */ r(C, {
+  return /* @__PURE__ */ r(T, {
     items: n.map((o) => ({
       key: o.id,
       ...o
     })),
     children: (o) => /* @__PURE__ */ u(b, {
-      className: N.tableRow,
+      className: h.tableRow,
       id: o.id,
-      children: [S && /* @__PURE__ */ r(D, {
+      children: [L && /* @__PURE__ */ r(D, {
         item: o,
-        zoomLevel: d
-      }), t.map((f) => /* @__PURE__ */ r(j, {
-        column: f,
+        zoomLevel: a
+      }), t.map((p) => /* @__PURE__ */ r(j, {
+        column: p,
         iconColumnVariant: e,
         item: o,
-        onInlineEditChange: T
-      }, `${f.textValue}-${o.id}`)), l && /* @__PURE__ */ r(G, {
+        onInlineEditChange: C
+      }, `${p.textValue}-${o.id}`)), l && /* @__PURE__ */ r(G, {
         item: o,
         itemActionMenuProps: s
       })]

package/dist/styles/action-bar.css

@@ -1 +1 @@
-._actionBar_dsa2b_1{display:flex;justify-content:space-between;padding:var(--space-4) 0}@media (max-width: 390px){._filterRow_dsa2b_8{display:none}}._additionalActions_dsa2b_13{display:flex;height:var(--size-8)}@media (max-width: 390px){._additionalActions_dsa2b_13{flex-grow:1;justify-content:space-between}}._viewModeButtonContainer_dsa2b_24{display:flex;align-items:center}
+._actionBar_bbxsv_1{display:flex;justify-content:space-between;padding:var(--space-4) 0}@media (width <= 374px){._filterRow_bbxsv_8{display:none}}._additionalActions_bbxsv_13{display:flex;height:var(--size-8)}@media (width <= 374px){._additionalActions_bbxsv_13{flex-grow:1;justify-content:space-between}}._viewModeButtonContainer_bbxsv_24{display:flex;align-items:center}

package/dist/styles/index.css

@@ -1 +1 @@
-._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}
+._tableHeaderActionsWrapper_169qr_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_169qr_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_169qr_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_169qr_33:after{height:100%!important}._tableRow_169qr_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_169qr_42 svg{transform:none!important}._tableNameCell_169qr_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubtitle_169qr_53{display:flex;flex-direction:column}._tableNameCellIconInline_169qr_58{flex-shrink:0}._infiniteScrollTableContainerFullHeight_169qr_62{width:100%;height:100%;overflow:auto}._iconCell_169qr_68{width:100%!important;height:100%!important}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.48.17",
+    "version": "0.48.18",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.66.0",
@@ -18,12 +18,12 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.68.1",
+        "@box/blueprint-web": "^12.68.2",
         "@box/blueprint-web-assets": "^4.66.1",
-        "@box/box-item-type-selector": "^0.69.10",
+        "@box/box-item-type-selector": "^0.69.11",
         "@box/eslint-plugin-blueprint": "1.0.4",
-        "@box/item-icon": "^0.23.10",
-        "@box/metadata-filter": "^1.26.8",
+        "@box/item-icon": "^0.23.11",
+        "@box/metadata-filter": "^1.26.9",
         "@box/storybook-utils": "0.14.2",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",