@box/metadata-view 0.24.10 → 0.25.0

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

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

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

@@ -1,48 +1,59 @@
-import { Button as f } from "@box/blueprint-web";
+import { Button as B } from "@box/blueprint-web";
 import { Grid as p } from "@box/blueprint-web-assets/icons/Fill";
-import { useIntl as w } from "react-intl";
-import { V as s } from "../../../../chunks/types.js";
-import n from "./messages.js";
-import { SortDropdown as _ } from "./sort-dropdown.js";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
-import { FilterRow as R } from "../filter-row/filter-row.js";
-import '../../../../styles/action-bar.css';const B = "_actionBar_1jgp4_1", g = "_filterRow_1jgp4_8", h = "_additionalActions_1jgp4_13", o = {
-  actionBar: B,
-  filterRow: g,
-  additionalActions: h
-}, I = ({
-  isViewModeButtonDisabled: e,
+import { useIntl as u } from "react-intl";
+import { V as r } from "../../../../chunks/types.js";
+import { SortDropdown as R } from "./sort-dropdown.js";
+import { ZoomButton as v } from "./zoom-button.js";
+import s from "./messages.js";
+import { jsxs as e, jsx as o } from "react/jsx-runtime";
+import { FilterRow as h } from "../filter-row/filter-row.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
+}, T = ({
+  isIconColumnEnabled: c,
+  isViewModeButtonDisabled: d,
   onViewModeClick: m,
-  sortableColumnNames: l,
-  sortDropdownProps: t,
-  viewMode: r,
-  ...d
+  onZoomLevelChange: l,
+  sortableColumnNames: f,
+  sortDropdownProps: a,
+  viewMode: i,
+  zoomLevel: w,
+  ..._
 }) => {
   const {
-    formatMessage: a
-  } = w();
-  return /* @__PURE__ */ c("div", {
-    className: o.actionBar,
-    children: [/* @__PURE__ */ i("div", {
-      className: o.filterRow,
-      children: /* @__PURE__ */ i(R, {
-        ...d
+    formatMessage: n
+  } = u();
+  return /* @__PURE__ */ e("div", {
+    className: t.actionBar,
+    children: [/* @__PURE__ */ o("div", {
+      className: t.filterRow,
+      children: /* @__PURE__ */ o(h, {
+        ..._
       })
-    }), /* @__PURE__ */ c("div", {
-      className: o.additionalActions,
-      children: [t && /* @__PURE__ */ i(_, {
-        ...t,
-        sortableColumnNames: l
-      }), !e && /* @__PURE__ */ i(f, {
-        "aria-label": r === s.GRID ? a(n.switchToListView) : a(n.switchToGridView),
-        icon: p,
-        onClick: m,
-        variant: r === s.GRID ? "primary" : "tertiary"
+    }), /* @__PURE__ */ e("div", {
+      className: t.additionalActions,
+      children: [a && /* @__PURE__ */ o(R, {
+        ...a,
+        sortableColumnNames: f
+      }), (c || i === r.GRID) && /* @__PURE__ */ o(v, {
+        onZoomLevelChange: l,
+        zoomLevel: w
+      }), !d && /* @__PURE__ */ o("div", {
+        className: t.viewModeButtonContainer,
+        children: /* @__PURE__ */ o(B, {
+          "aria-label": i === r.GRID ? n(s.switchToListView) : n(s.switchToGridView),
+          icon: p,
+          onClick: m,
+          variant: i === r.GRID ? "primary" : "tertiary"
+        })
       })]
     })]
   });
 };
 export {
-  I as ActionBar,
-  I as default
+  T as ActionBar,
+  T as default
 };

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

@@ -1,5 +1,5 @@
 import { defineMessages as e } from "react-intl";
-const t = e({
+const i = e({
   switchToGridView: {
     id: "groupSharedFeatures.metadataView.actionBar.switchToGridView",
     defaultMessage: "Switch to Grid View"
@@ -7,8 +7,20 @@ const t = e({
   switchToListView: {
     id: "groupSharedFeatures.metadataView.actionBar.switchToListView",
     defaultMessage: "Switch to List View"
+  },
+  sliderDecreaseSize: {
+    id: "groupSharedFeatures.metadataView.actionBar.sliderDecreaseSize",
+    defaultMessage: "Decrease"
+  },
+  sliderIncreaseSize: {
+    id: "groupSharedFeatures.metadataView.actionBar.sliderIncreaseSize",
+    defaultMessage: "Increase"
+  },
+  sliderLabel: {
+    id: "groupSharedFeatures.metadataView.actionBar.sliderLabel",
+    defaultMessage: "Slider"
   }
 });
 export {
-  t as default
+  i as default
 };

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

@@ -0,0 +1,30 @@
+import { useIntl as o } from "react-intl";
+import { Slider as i } from "@box/blueprint-web";
+import r from "./messages.js";
+import { jsx as s } from "react/jsx-runtime";
+import '../../../../styles/zoom-button.css';const a = "_sliderContainer_1entc_1", l = {
+  sliderContainer: a
+}, f = ({
+  onZoomLevelChange: t,
+  zoomLevel: n
+}) => {
+  const {
+    formatMessage: e
+  } = o();
+  return /* @__PURE__ */ s("div", {
+    className: l.sliderContainer,
+    children: /* @__PURE__ */ s(i, {
+      max: 2,
+      min: 0,
+      minusButtonLabel: e(r.sliderDecreaseSize),
+      onValueChange: t,
+      plusButtonLabel: e(r.sliderIncreaseSize),
+      sliderLabel: e(r.sliderLabel),
+      value: n
+    })
+  });
+};
+export {
+  f as ZoomButton,
+  f as default
+};

package/dist/esm/lib/components/constants.js

@@ -0,0 +1,6 @@
+const I = [8, 5, 3], p = ["36px", "84px", "111px"], x = ["36px", "111px", "147px"];
+export {
+  I as THUMBNAIL_GRID_VIEW_SIZES,
+  p as THUMBNAIL_LIST_VIEW_HEIGHTS,
+  x as THUMBNAIL_WIDTHS
+};

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

@@ -1,45 +1,50 @@
-import { GridList as i } from "@box/blueprint-web";
+import { GridList as t } from "@box/blueprint-web";
 import { ItemTypeIcon as a } from "@box/item-icon";
 import { useIntl as l } from "react-intl";
-import { V as s } from "../../../../chunks/types.js";
-import d from "./messages.js";
-import { jsx as e, jsxs as c } from "react/jsx-runtime";
-import { ItemActionMenu as h } from "../item-action-menu/item-action-menu.js";
-import '../../../../styles/metadata-grid.css';const u = "_itemThumbnail_1j3e6_1", p = {
-  itemThumbnail: u
-}, w = ({
+import { V as d } from "../../../../chunks/types.js";
+import { THUMBNAIL_GRID_VIEW_SIZES as c } from "../constants.js";
+import _ from "./messages.js";
+import { jsx as e, jsxs as I } from "react/jsx-runtime";
+import { ItemActionMenu as T } from "../item-action-menu/item-action-menu.js";
+import '../../../../styles/metadata-grid.css';const p = "_itemThumbnail_1j3e6_1", u = {
+  itemThumbnail: p
+}, E = 188, f = 250, M = 8, h = 5, A = (m) => E + f * (M - m) / h, C = ({
   items: m,
-  itemActionMenuProps: t
+  itemActionMenuProps: o,
+  zoomLevel: r
 }) => {
   const {
-    formatMessage: o
+    formatMessage: n
   } = l();
-  return /* @__PURE__ */ e(i, {
-    "aria-label": o(d.gridView),
+  return /* @__PURE__ */ e(t, {
+    "aria-label": n(_.gridView),
     selectionMode: "multiple",
-    children: m.map((r, f) => /* @__PURE__ */ c(i.Item, {
-      children: [/* @__PURE__ */ e(i.Thumbnail, {
-        className: p.itemThumbnail,
+    style: {
+      gridTemplateColumns: `repeat(auto-fit, minmax(${A(c[r])}px, 1fr))`
+    },
+    children: m.map((i, G) => /* @__PURE__ */ I(t.Item, {
+      children: [/* @__PURE__ */ e(t.Thumbnail, {
+        className: u.itemThumbnail,
         children: /* @__PURE__ */ e(a, {
           dimension: 128,
-          item: r
+          item: i
         })
-      }), /* @__PURE__ */ e(i.Header, {
-        children: r.name
-      }), /* @__PURE__ */ e(i.Subtitle, {
-        children: r.createdAt
-      }), t ? /* @__PURE__ */ e(i.Actions, {
-        children: (n) => /* @__PURE__ */ e(h, {
-          ...t,
-          item: r,
-          onOpenChange: n,
-          viewMode: s.GRID
+      }), /* @__PURE__ */ e(t.Header, {
+        children: i.name
+      }), /* @__PURE__ */ e(t.Subtitle, {
+        children: i.createdAt
+      }), o ? /* @__PURE__ */ e(t.Actions, {
+        children: (s) => /* @__PURE__ */ e(T, {
+          ...o,
+          item: i,
+          onOpenChange: s,
+          viewMode: d.GRID
         })
       }) : null]
-    }, r.id))
+    }, i.id))
   });
 };
 export {
-  w as MetadataGrid,
-  w as default
+  C as MetadataGrid,
+  C as default
 };

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

@@ -1,82 +1,89 @@
-import { Text as x, ListCheckbox as T, Table as g, TableHeader as w, Column as W } from "@box/blueprint-web";
-import { useIntl as y } from "react-intl";
-import C from "./table-body/ghost-table-body.js";
-import { s as r, T as M } from "../../../../chunks/table-body-with-data.js";
-import { I as N } from "../../../../chunks/types.js";
-import h from "./messages.js";
-import { jsx as e, jsxs as R } from "react/jsx-runtime";
-const L = ({
+import { Text as W, ListCheckbox as g, Table as I, TableHeader as w, Column as C } from "@box/blueprint-web";
+import { useIntl as M } from "react-intl";
+import N from "./table-body/ghost-table-body.js";
+import { s as i, T as y } from "../../../../chunks/table-body-with-data.js";
+import { I as A } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as B } from "../constants.js";
+import f from "./messages.js";
+import { jsx as a, jsxs as D } from "react/jsx-runtime";
+const S = ({
   columns: l,
-  isLoading: i = !1,
-  iconColumnVariant: o,
+  isLoading: o = !1,
+  iconColumnVariant: n,
   isSelectAllEnabled: d,
-  items: f,
-  itemActionMenuProps: p,
-  ...u
+  items: p,
+  itemActionMenuProps: u,
+  zoomLevel: t,
+  ...H
 }) => {
   const {
     formatMessage: m
-  } = y(), a = [];
-  o === N.COLUMN && a.push({
-    id: "item-type-icon",
-    isRowHeader: !1,
-    hideHeader: !1,
-    maxWidth: 60,
-    minWidth: 60
-  });
-  const b = l.map((s) => {
+  } = M(), s = [], b = 0;
+  if (n === A.COLUMN) {
+    t = t || b;
+    const e = parseInt(B[t], 10) + 24;
+    s.push({
+      id: "item-type-icon",
+      isRowHeader: !1,
+      hideHeader: !1,
+      minWidth: e,
+      maxWidth: e
+    });
+  }
+  const T = l.map((e) => {
     const {
-      id: n,
-      headerRenderer: c,
-      textValue: t,
-      ...H
-    } = s;
+      id: c,
+      headerRenderer: h,
+      textValue: r,
+      ...x
+    } = e;
     return {
-      children: c ? c(t, s) : /* @__PURE__ */ e(x, {
+      children: h ? h(r, e) : /* @__PURE__ */ a(W, {
         as: "span",
-        children: t
+        children: r
       }),
-      isRowHeader: n === "name",
-      id: n,
-      textValue: t,
-      ...H
+      isRowHeader: c === "name",
+      id: c,
+      textValue: r,
+      ...x
     };
   });
-  return a.push(...b), d && a.push({
+  return s.push(...T), d && s.push({
     id: "actions",
-    className: r.tableHeaderActions,
-    children: /* @__PURE__ */ e("div", {
-      className: r.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(T, {
-        "aria-label": m(h.selectAll),
-        className: r.selectAllCheckbox,
-        isDisabled: i
+    className: i.tableHeaderActions,
+    children: /* @__PURE__ */ a("div", {
+      className: i.tableHeaderActionsWrapper,
+      children: /* @__PURE__ */ a(g, {
+        "aria-label": m(f.selectAll),
+        className: i.selectAllCheckbox,
+        isDisabled: o
       })
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1
-  }), /* @__PURE__ */ R(g, {
-    "aria-label": m(h.listView),
+  }), /* @__PURE__ */ D(I, {
+    "aria-label": m(f.listView),
     selectionBehavior: "toggle",
     selectionMode: "multiple",
-    ...u,
-    children: [/* @__PURE__ */ e(w, {
-      columns: a,
-      children: (s) => /* @__PURE__ */ e(W, {
-        ...s
+    ...H,
+    children: [/* @__PURE__ */ a(w, {
+      columns: s,
+      children: (e) => /* @__PURE__ */ a(C, {
+        ...e
       })
-    }), i ? /* @__PURE__ */ e(C, {
-      columnLength: a.length
-    }) : /* @__PURE__ */ e(M, {
+    }), o ? /* @__PURE__ */ a(N, {
+      columnLength: s.length
+    }) : /* @__PURE__ */ a(y, {
       columns: l,
-      iconColumnVariant: o,
+      iconColumnVariant: n,
       isSelectAllEnabled: d,
-      itemActionMenuProps: p,
-      items: f
+      itemActionMenuProps: u,
+      items: p,
+      zoomLevel: t
     })]
   });
 };
 export {
-  L as default
+  S as default
 };

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

@@ -4,9 +4,10 @@ import "react";
 import "@box/item-icon";
 import "clsx";
 import "../../../../../chunks/types.js";
-import { T as l } from "../../../../../chunks/table-body-with-data.js";
+import "../../constants.js";
+import { T as s } from "../../../../../chunks/table-body-with-data.js";
 import "react/jsx-runtime";
 import "../../item-action-menu/item-action-menu.js";
 export {
-  l as default
+  s as default
 };