@box/metadata-view 1.24.1 → 1.25.0

package/dist/esm/lib/components/item-action-menu/item-action-menu.js

@@ -1,12 +1,12 @@
 import T, { useMemo as j } from "react";
 import { useIntl as y } from "react-intl";
-import { IconButton as f, Tooltip as z, DropdownMenu as a, GridList as h } from "@box/blueprint-web";
-import { Ellipsis as R } from "@box/blueprint-web-assets/icons/Fill";
-import { V as M } from "../../../../chunks/types.js";
-import { getDataTargetId as m } from "./identifier.js";
+import { IconButton as I, Tooltip as z, DropdownMenu as r, GridList as f } from "@box/blueprint-web";
+import { Ellipsis as W } from "@box/blueprint-web-assets/icons/Fill";
+import { V as h } from "../../../../chunks/types.js";
+import { getDataTargetId as l } from "./identifier.js";
 import $ from "./messages.js";
-import { jsxs as p, jsx as o } from "react/jsx-runtime";
-import '../../../../styles/item-action-menu.css';const G = "_tableActionBar_akgtp_1", V = "_actionItemIcon_akgtp_6", k = {
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import '../../../../styles/item-action-menu.css';const G = "_tableActionBar_akgtp_1", V = "_actionItemIcon_akgtp_6", g = {
   tableActionBar: G,
   actionItemIcon: V
 };
@@ -18,109 +18,110 @@ function A(c) {
 function x({
   item: c,
   label: t,
-  onClick: l,
-  icon: r,
+  onClick: m,
+  icon: o,
   isDisabled: d
 }) {
-  const i = A(() => {
-    l(c);
-  }), I = j(() => (d == null ? void 0 : d(c)) ?? !1, [d, c]);
-  return /* @__PURE__ */ p(a.Item, {
-    "data-target-id": m(a.Item, t),
-    disabled: I,
-    onClick: i,
-    children: [/* @__PURE__ */ o(r, {
-      className: k.actionItemIcon
+  const p = A(() => {
+    m(c);
+  }), s = j(() => (d == null ? void 0 : d(c)) ?? !1, [d, c]);
+  return /* @__PURE__ */ i(r.Item, {
+    "data-target-id": l(r.Item, t),
+    disabled: s,
+    onClick: p,
+    children: [/* @__PURE__ */ n(o, {
+      className: g.actionItemIcon
     }), t]
   }, t);
 }
-function K({
+function O({
   actions: c,
   inlineActions: t,
-  isDisabled: l,
-  item: r,
+  isDisabled: m,
+  item: o,
   onOpenChange: d,
-  subMenuActions: i,
-  subMenuTrigger: I,
-  viewMode: S = M.LIST
+  subMenuActions: p,
+  subMenuTrigger: s,
+  viewMode: b = h.LIST
 }) {
   const {
-    formatMessage: s
+    formatMessage: k
   } = y(), {
     label: N,
     icon: _
-  } = I || {};
-  return /* @__PURE__ */ p("div", {
-    className: k.tableActionBar,
-    children: [S === M.LIST && (t == null ? void 0 : t.map(({
-      onClick: n,
+  } = s || {};
+  return /* @__PURE__ */ i("div", {
+    className: g.tableActionBar,
+    children: [b === h.LIST && (t == null ? void 0 : t.map(({
+      onClick: a,
       label: e,
-      icon: g,
+      icon: M,
       isDisabled: u,
       getTooltipContent: B
     }) => {
-      const b = B == null ? void 0 : B(r), L = `${r.id}-${e}`, C = /* @__PURE__ */ o(f, {
+      const S = B == null ? void 0 : B(o), L = `${o.id}-${e}`, C = (u == null ? void 0 : u(o)) ?? !1, R = /* @__PURE__ */ n(I, {
+        accessibleWhenDisabled: C && !!S || void 0,
         "aria-label": e,
-        "data-target-id": m(f, e),
-        disabled: (u == null ? void 0 : u(r)) ?? !1,
-        icon: g,
-        onClick: A(() => n(r)),
+        "data-target-id": l(I, e),
+        disabled: C,
+        icon: M,
+        onClick: A(() => a(o)),
         size: "large"
       });
-      return b ? /* @__PURE__ */ o(z, {
-        content: b,
-        children: C
-      }, L) : /* @__PURE__ */ o(T.Fragment, {
-        children: C
+      return S ? /* @__PURE__ */ n(z, {
+        content: S,
+        children: R
+      }, L) : /* @__PURE__ */ n(T.Fragment, {
+        children: R
       }, L);
-    })), c ? /* @__PURE__ */ p(a.Root, {
+    })), c ? /* @__PURE__ */ i(r.Root, {
       onOpenChange: d,
-      children: [/* @__PURE__ */ o(a.Trigger, {
-        children: S === M.LIST ? /* @__PURE__ */ o(f, {
-          "aria-label": s($.actionMenu),
-          "data-target-id": m(f, "openActionMenu"),
-          disabled: l,
-          icon: R,
+      children: [/* @__PURE__ */ n(r.Trigger, {
+        children: b === h.LIST ? /* @__PURE__ */ n(I, {
+          "aria-label": k($.actionMenu),
+          "data-target-id": l(I, "openActionMenu"),
+          disabled: m,
+          icon: W,
           size: "large"
-        }) : /* @__PURE__ */ o(h.ActionIconButton, {
-          "aria-label": s($.actionMenu),
-          "data-target-id": m(h.ActionIconButton, "openActionMenu"),
-          disabled: l,
-          icon: R
+        }) : /* @__PURE__ */ n(f.ActionIconButton, {
+          "aria-label": k($.actionMenu),
+          "data-target-id": l(f.ActionIconButton, "openActionMenu"),
+          disabled: m,
+          icon: W
         })
-      }), /* @__PURE__ */ p(a.Content, {
+      }), /* @__PURE__ */ i(r.Content, {
         align: "start",
-        children: [c.map((n) => /* @__PURE__ */ o(x, {
-          item: r,
-          ...n
-        }, n.label)), i && I && /* @__PURE__ */ p(a.SubMenuRoot, {
-          children: [/* @__PURE__ */ p(a.SubMenuTrigger, {
-            "data-target-id": m(a.SubMenuTrigger, "openActionSubmenu"),
-            children: [_ && /* @__PURE__ */ o(_, {
-              className: k.actionItemIcon
+        children: [c.map((a) => /* @__PURE__ */ n(x, {
+          item: o,
+          ...a
+        }, a.label)), p && s && /* @__PURE__ */ i(r.SubMenuRoot, {
+          children: [/* @__PURE__ */ i(r.SubMenuTrigger, {
+            "data-target-id": l(r.SubMenuTrigger, "openActionSubmenu"),
+            children: [_ && /* @__PURE__ */ n(_, {
+              className: g.actionItemIcon
             }), N]
-          }), /* @__PURE__ */ o(a.SubMenuContent, {
-            children: i.map((n) => /* @__PURE__ */ o(x, {
-              item: r,
-              ...n
-            }, n.label))
+          }), /* @__PURE__ */ n(r.SubMenuContent, {
+            children: p.map((a) => /* @__PURE__ */ n(x, {
+              item: o,
+              ...a
+            }, a.label))
           })]
         })]
       })]
-    }) : null, S === M.GRID && (t == null ? void 0 : t.map(({
-      onClick: n,
+    }) : null, b === h.GRID && (t == null ? void 0 : t.map(({
+      onClick: a,
       label: e,
-      icon: g,
+      icon: M,
       isDisabled: u
-    }) => /* @__PURE__ */ o(h.ActionIconButton, {
+    }) => /* @__PURE__ */ n(f.ActionIconButton, {
       "aria-label": e,
-      "data-target-id": m(h.ActionIconButton, e),
-      disabled: (u == null ? void 0 : u(r)) ?? !1,
-      icon: g,
-      onClick: () => n(r)
-    }, `${r.id}-${e}`)))]
+      "data-target-id": l(f.ActionIconButton, e),
+      disabled: (u == null ? void 0 : u(o)) ?? !1,
+      icon: M,
+      onClick: () => a(o)
+    }, `${o.id}-${e}`)))]
   });
 }
 export {
-  K as ItemActionMenu
+  O as ItemActionMenu
 };

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

@@ -1,5 +1,5 @@
-import { useVirtualizer as S } from "@tanstack/react-virtual";
-import { useRef as h, useMemo as z, useEffect as T } from "react";
+import { useRef as S, useMemo as h, useEffect as z } from "react";
+import { useVirtualizer as T } from "@tanstack/react-virtual";
 import { Size14 as p } from "@box/blueprint-web-assets/tokens/px-tokens";
 const b = parseInt(p, 10), _ = ({
   items: t,
@@ -10,7 +10,7 @@ const b = parseInt(p, 10), _ = ({
   onGetNextPage: o,
   placeholderRowsCount: c = 20
 }) => {
-  const s = h(0), f = z(() => t.length + (r || e ? c : 0), [t, e, r, c]), u = S({
+  const s = S(0), f = h(() => t.length + (r || e ? c : 0), [t, e, r, c]), u = T({
     count: f,
     getScrollElement: () => l.current,
     getItemKey: (I) => {
@@ -19,7 +19,7 @@ const b = parseInt(p, 10), _ = ({
     },
     estimateSize: () => a
   }), n = u.getVirtualItems();
-  T(() => {
+  z(() => {
     s.current = t.length;
   }, [t.length]), (t.length === 0 || t.length > 0 && s.current === 0) && l.current && (l.current.scrollTop = 0);
   const i = n[n.length - 1], g = !!i && i.index >= t.length - 1;

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

@@ -10,26 +10,26 @@ import { jsxs as C, jsx as t } from "react/jsx-runtime";
 import { InlineEditingCell as W } from "./inline-editing-cell/inline-editing-cell.js";
 import { ItemActionMenu as j } from "../../item-action-menu/item-action-menu.js";
 import { GhostTableRow as G } from "./ghost-table-row/ghost-table-row.js";
-const S = (e, n, l) => {
-  const o = l ? n.split(".")[1] : n;
-  return L(e, o);
+const S = (e, n, o) => {
+  const l = o ? n.split(".")[1] : n;
+  return L(e, l);
 }, H = /* @__PURE__ */ h.memo(({
   column: e,
   iconColumnVariant: n,
-  item: l
+  item: o
 }) => {
   const {
-    id: o,
+    id: l,
     isItemMetadata: a,
     subtitle: d,
     textValue: m
-  } = e, i = `${m}-${l.id}`;
+  } = e, i = `${m}-${o.id}`;
   return /* @__PURE__ */ t(f, {
     children: /* @__PURE__ */ C("div", {
       className: c.tableNameCell,
       children: [/* @__PURE__ */ t(E, {
         className: c.tableNameCellIconInline,
-        item: l
+        item: o
       }), /* @__PURE__ */ C("div", {
         className: D(c.tableNameCellTitle, {
           [c.hasSubtitle]: n === p.INLINE_SUBTITLE
@@ -37,7 +37,7 @@ const S = (e, n, l) => {
         children: [/* @__PURE__ */ t($, {
           as: "span",
           className: c.tableNameCellText,
-          children: S(l, o, a)
+          children: S(o, l, a)
         }), n === p.INLINE_SUBTITLE && /* @__PURE__ */ t($, {
           as: "span",
           className: c.tableNameCellText,
@@ -51,39 +51,39 @@ const S = (e, n, l) => {
   column: e,
   item: n
 }) => {
-  var o;
-  const l = `${e.textValue}-${n.id}`;
+  var l;
+  const o = `${e.textValue}-${n.id}`;
   return /* @__PURE__ */ t(f, {
-    children: (o = e.cellRenderer) == null ? void 0 : o.call(e, n, e)
-  }, l);
+    children: (l = e.cellRenderer) == null ? void 0 : l.call(e, n, e)
+  }, o);
 }), F = /* @__PURE__ */ h.memo(({
   column: e,
   item: n
 }) => {
-  const l = `${e.textValue}-${n.id}`, o = L(n, e.id);
-  return o ? /* @__PURE__ */ t(f, {
-    children: o.join(" ")
-  }, l) : /* @__PURE__ */ t(f, {}, l);
+  const o = `${e.textValue}-${n.id}`, l = L(n, e.id);
+  return l ? /* @__PURE__ */ t(f, {
+    children: l.join(" ")
+  }, o) : /* @__PURE__ */ t(f, {}, o);
 }), K = /* @__PURE__ */ h.memo(({
   column: e,
   item: n
 }) => {
   const {
-    id: l,
-    isItemMetadata: o,
+    id: o,
+    isItemMetadata: l,
     textValue: a
   } = e, d = `${a}-${n.id}`;
   return /* @__PURE__ */ t(f, {
     children: /* @__PURE__ */ t($, {
       as: "span",
-      children: S(n, l, o)
+      children: S(n, o, l)
     })
   }, d);
 }), q = /* @__PURE__ */ h.memo(({
   column: e,
   iconColumnVariant: n,
-  item: l,
-  onInlineEditChange: o
+  item: o,
+  onInlineEditChange: l
 }) => {
   const {
     cellRenderer: a,
@@ -93,21 +93,21 @@ const S = (e, n, l) => {
   } = e, N = d === "item.name" && (n === p.INLINE || n === p.INLINE_SUBTITLE);
   return a ? /* @__PURE__ */ t(A, {
     column: e,
-    item: l
+    item: o
   }) : N ? /* @__PURE__ */ t(H, {
     column: e,
     iconColumnVariant: n,
-    item: l
+    item: o
   }) : m && (i === "multiSelect" || i === "enum") ? /* @__PURE__ */ t(W, {
     column: e,
-    item: l,
-    onInlineEditChange: o
-  }, `${e.id}-${l.id}`) : i === "multiSelect" ? /* @__PURE__ */ t(F, {
+    item: o,
+    onInlineEditChange: l
+  }, `${e.id}-${o.id}`) : i === "multiSelect" ? /* @__PURE__ */ t(F, {
     column: e,
-    item: l
+    item: o
   }) : /* @__PURE__ */ t(K, {
     column: e,
-    item: l
+    item: o
   });
 }), J = /* @__PURE__ */ h.memo(({
   item: e,
@@ -123,37 +123,37 @@ const S = (e, n, l) => {
 }, `item-type-icon-${e.id}`)), Q = /* @__PURE__ */ h.memo(({
   item: e,
   itemActionMenuProps: n,
-  isCheckboxDisabled: l
+  isCheckboxDisabled: o
 }) => /* @__PURE__ */ t(_, {
-  isCheckboxDisabled: l,
-  children: (o) => n ? /* @__PURE__ */ t(j, {
+  isCheckboxDisabled: o,
+  children: (l) => n ? /* @__PURE__ */ t(j, {
     ...n,
     item: e,
-    onOpenChange: o
+    onOpenChange: l
   }) : null
 })), re = ({
   areSelectionCheckboxesDisabled: e,
   columnCount: n,
-  columns: l,
-  iconColumnVariant: o,
+  columns: o,
+  iconColumnVariant: l,
   items: a,
   itemActionMenuProps: d,
   onInlineEditChange: m,
   onTableRowClick: i,
   shouldRenderActionColumn: N,
   virtualItems: I,
-  totalVirtualSize: w,
+  totalVirtualSize: B,
   zoomLevel: b
 }) => {
-  const B = o === p.COLUMN;
+  const w = l === p.COLUMN;
   if (I) {
     const s = (r) => /* @__PURE__ */ t(G, {
       columnLength: n || 0,
       rowKey: `ghost-${r}`
     }), T = (r) => /* @__PURE__ */ t(k, {
       areSelectionCheckboxesDisabled: e,
-      columns: l,
-      iconColumnVariant: o,
+      columns: o,
+      iconColumnVariant: l,
       item: r,
       itemActionMenuProps: d,
       onTableRowClick: i,
@@ -164,7 +164,7 @@ const S = (e, n, l) => {
       return (r == null ? void 0 : r.start) || 0;
     }, M = () => {
       const r = I[I.length - 1], O = (r == null ? void 0 : r.end) || 0;
-      return Math.max((w || 0) - O, 0);
+      return Math.max((B || 0) - O, 0);
     }, u = R(), g = M();
     return /* @__PURE__ */ C(x, {
       children: [!!u && /* @__PURE__ */ t(y, {
@@ -191,12 +191,12 @@ const S = (e, n, l) => {
       className: c.tableRow,
       id: s.id,
       onAction: () => i(s),
-      children: [B && /* @__PURE__ */ t(J, {
+      children: [w && /* @__PURE__ */ t(J, {
         item: s,
         zoomLevel: b
-      }), l.map((T) => /* @__PURE__ */ t(q, {
+      }), o.map((T) => /* @__PURE__ */ t(q, {
         column: T,
-        iconColumnVariant: o,
+        iconColumnVariant: l,
         item: s,
         onInlineEditChange: m
       }, `${T.textValue}-${s.id}`)), N && /* @__PURE__ */ t(Q, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "1.24.1",
+    "version": "1.25.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.76.2",
@@ -18,12 +18,12 @@
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.102.0",
+        "@box/blueprint-web": "^12.103.0",
         "@box/blueprint-web-assets": "^4.85.0",
-        "@box/box-item-type-selector": "^1.14.1",
+        "@box/box-item-type-selector": "^1.14.2",
         "@box/eslint-plugin-blueprint": "1.0.5",
-        "@box/item-icon": "^2.5.1",
-        "@box/metadata-filter": "^1.52.1",
+        "@box/item-icon": "^2.5.2",
+        "@box/metadata-filter": "^1.52.2",
         "@box/storybook-utils": "0.14.22",
         "@box/types": "2.0.0",
         "@tanstack/react-virtual": "^3.10.8",