@box/metadata-view 0.19.0 → 0.20.0

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

@@ -1,80 +1,77 @@
-import { TableBody as L, Row as x, Cell as c, Text as i, ActionCell as A } from "@box/blueprint-web";
+import { TableBody as C, Row as x, Cell as c, Text as o, ActionCell as A } from "@box/blueprint-web";
 import h from "lodash/get";
 import { ItemTypeIcon as p } from "@box/item-icon";
-import E from "clsx";
-import { jsx as l, jsxs as o } from "react/jsx-runtime";
-import { ItemActionMenu as f } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/table-body-with-data.css';let a = /* @__PURE__ */ function(t) {
-  return t.INLINE = "inline", t.COLUMN = "column", t.INLINE_SUBTITLE = "inline-subtitle", t;
-}({});
-const C = "_tableHeaderActionsWrapper_r2hj7_1", S = "_tableHeaderActions_r2hj7_1", y = "_selectAllCheckbox_r2hj7_33", j = "_tableNameCell_r2hj7_38", B = "_tableNameCellSubTitle_r2hj7_44", I = {
-  tableHeaderActionsWrapper: C,
+import f from "clsx";
+import { I as t } from "./types.js";
+import { jsx as l, jsxs as d } from "react/jsx-runtime";
+import { ItemActionMenu as L } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/table-body-with-data.css';const y = "_tableHeaderActionsWrapper_r2hj7_1", S = "_tableHeaderActions_r2hj7_1", j = "_selectAllCheckbox_r2hj7_33", E = "_tableNameCell_r2hj7_38", H = "_tableNameCellSubTitle_r2hj7_44", N = {
+  tableHeaderActionsWrapper: y,
   tableHeaderActions: S,
-  selectAllCheckbox: y,
-  tableNameCell: j,
-  tableNameCellSubTitle: B
-}, g = ({
-  columns: t,
+  selectAllCheckbox: j,
+  tableNameCell: E,
+  tableNameCellSubTitle: H
+}, O = ({
+  columns: m,
   iconColumnVariant: r,
   isSelectAllEnabled: _,
-  items: T,
-  itemActionMenuProps: b
-}) => /* @__PURE__ */ l(L, {
-  items: T.map((e) => ({
+  items: I,
+  itemActionMenuProps: i
+}) => /* @__PURE__ */ l(C, {
+  items: I.map((e) => ({
     key: e.id,
     ...e
   })),
-  children: (e) => /* @__PURE__ */ o(x, {
+  children: (e) => /* @__PURE__ */ d(x, {
     id: e.id,
-    children: [r === a.COLUMN ? /* @__PURE__ */ l(c, {
+    children: [r === t.COLUMN ? /* @__PURE__ */ l(c, {
       children: /* @__PURE__ */ l(p, {
         item: e
       })
-    }, `item-type-icon-${e.id}`) : null, t.map((s) => {
+    }, `item-type-icon-${e.id}`) : null, m.map((a) => {
       const {
-        cellRenderer: N,
-        id: n,
-        subTitle: m,
+        cellRenderer: b,
+        id: s,
+        subTitle: T,
         textValue: u
-      } = s, d = `${u}-${e.id}`;
-      return n === "name" && (r === a.INLINE || r === a.INLINE_SUBTITLE) ? /* @__PURE__ */ l(c, {
-        children: /* @__PURE__ */ o("div", {
-          className: I.tableNameCell,
+      } = a, n = `${u}-${e.id}`;
+      return s === "name" && (r === t.INLINE || r === t.INLINE_SUBTITLE) ? /* @__PURE__ */ l(c, {
+        children: /* @__PURE__ */ d("div", {
+          className: N.tableNameCell,
           children: [/* @__PURE__ */ l(p, {
             item: e
-          }), /* @__PURE__ */ o("div", {
-            className: E({
-              [I.tableNameCellSubTitle]: r === a.INLINE_SUBTITLE
+          }), /* @__PURE__ */ d("div", {
+            className: f({
+              [N.tableNameCellSubTitle]: r === t.INLINE_SUBTITLE
             }),
-            children: [/* @__PURE__ */ l(i, {
+            children: [/* @__PURE__ */ l(o, {
               as: "span",
-              children: h(e, n)
-            }), r === a.INLINE_SUBTITLE ? /* @__PURE__ */ l(i, {
+              children: h(e, s)
+            }), r === t.INLINE_SUBTITLE ? /* @__PURE__ */ l(o, {
               as: "span",
               color: "textOnLightSecondary",
-              children: m
+              children: T
             }) : null]
           })]
         })
-      }, d) : N ? /* @__PURE__ */ l(c, {
-        children: N(e, s)
-      }, d) : /* @__PURE__ */ l(c, {
-        children: /* @__PURE__ */ l(i, {
+      }, n) : b ? /* @__PURE__ */ l(c, {
+        children: b(e, a)
+      }, n) : /* @__PURE__ */ l(c, {
+        children: /* @__PURE__ */ l(o, {
           as: "span",
-          children: h(e, n)
+          children: h(e, s)
         })
-      }, d);
+      }, n);
     }), _ && /* @__PURE__ */ l(A, {
-      children: (s) => b ? /* @__PURE__ */ l(f, {
-        ...b,
+      children: (a) => i ? /* @__PURE__ */ l(L, {
+        ...i,
         item: e,
-        onOpenChange: s
+        onOpenChange: a
       }) : null
     })]
   }, e.id)
 });
 export {
-  a as I,
-  g as T,
-  I as s
+  O as T,
+  N as s
 };

package/dist/chunks/types.js

@@ -0,0 +1,9 @@
+let e = /* @__PURE__ */ function(t) {
+  return t.INLINE = "inline", t.COLUMN = "column", t.INLINE_SUBTITLE = "inline-subtitle", t;
+}({}), i = /* @__PURE__ */ function(t) {
+  return t.GRID = "grid", t.LIST = "list", t;
+}({});
+export {
+  e as I,
+  i as V
+};

package/dist/esm/index.js

@@ -1,4 +1,7 @@
-import { MetadataView as t } from "./lib/metadata-view.js";
+import { MetadataView as e } from "./lib/metadata-view.js";
+import { I as t, V } from "../chunks/types.js";
 export {
-  t as MetadataView
+  t as IconColumnVariant,
+  e as MetadataView,
+  V as ViewMode
 };

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

@@ -1,24 +1,37 @@
-import { Text as o } from "@box/blueprint-web";
-import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import { FilterRow as i } from "../filter-row/filter-row.js";
-import '../../../../styles/action-bar.css';const a = "_actionBar_17enr_1", c = {
-  actionBar: a
-}, d = ({
-  filterRowProps: t
-}) => /* @__PURE__ */ e("div", {
-  className: c.actionBar,
-  children: [/* @__PURE__ */ r("div", {
-    children: /* @__PURE__ */ r(i, {
-      ...t
-    })
-  }), /* @__PURE__ */ r("div", {
-    children: /* @__PURE__ */ r(o, {
-      as: "span",
-      children: "placeholder to be replaced with buttons from other tickets"
-    })
-  })]
-});
+import { Button as n } from "@box/blueprint-web";
+import { Grid as m } from "@box/blueprint-web-assets/icons/Fill";
+import { useIntl as c } from "react-intl";
+import { V as t } from "../../../../chunks/types.js";
+import a from "./messages.js";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { FilterRow as d } from "../filter-row/filter-row.js";
+import '../../../../styles/action-bar.css';const f = "_actionBar_17enr_1", p = {
+  actionBar: f
+}, x = ({
+  onViewModeClick: s,
+  viewMode: i,
+  ...e
+}) => {
+  const {
+    formatMessage: o
+  } = c();
+  return /* @__PURE__ */ l("div", {
+    className: p.actionBar,
+    children: [/* @__PURE__ */ r("div", {
+      children: /* @__PURE__ */ r(d, {
+        ...e
+      })
+    }), /* @__PURE__ */ r("div", {
+      children: /* @__PURE__ */ r(n, {
+        "aria-label": i === t.GRID ? o(a.switchToListView) : o(a.switchToGridView),
+        icon: m,
+        onClick: s,
+        variant: i === t.GRID ? "primary" : "tertiary"
+      })
+    })]
+  });
+};
 export {
-  d as ActionBar,
-  d as default
+  x as ActionBar,
+  x as default
 };

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

@@ -0,0 +1,14 @@
+import { defineMessages as e } from "react-intl";
+const t = e({
+  switchToGridView: {
+    id: "groupSharedFeatures.metadataView.actionBar.switchToGridView",
+    defaultMessage: "Switch to Grid View"
+  },
+  switchToListView: {
+    id: "groupSharedFeatures.metadataView.actionBar.switchToListView",
+    defaultMessage: "Switch to List View"
+  }
+});
+export {
+  t as default
+};

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

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,10 @@
+import { defineMessages as e } from "react-intl";
+const s = e({
+  gridView: {
+    id: "groupSharedFeatures.metadataView.gridList.gridView",
+    defaultMessage: "Grid View"
+  }
+});
+export {
+  s as default
+};

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

@@ -0,0 +1,45 @@
+import { GridList as i } 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 u } from "../item-action-menu/item-action-menu.js";
+import '../../../../styles/metadata-grid.css';const h = "_itemThumbnail_1j3e6_1", p = {
+  itemThumbnail: h
+}, w = ({
+  items: m,
+  itemActionMenuProps: t
+}) => {
+  const {
+    formatMessage: n
+  } = l();
+  return /* @__PURE__ */ e(i, {
+    "aria-label": n(d.gridView),
+    selectionMode: "multiple",
+    children: m.map((r, f) => /* @__PURE__ */ c(i.Item, {
+      children: [/* @__PURE__ */ e(i.Thumbnail, {
+        className: p.itemThumbnail,
+        children: /* @__PURE__ */ e(a, {
+          dimension: 128,
+          item: r
+        })
+      }), /* @__PURE__ */ e(i.Header, {
+        children: r.name
+      }), /* @__PURE__ */ e(i.Subtitle, {
+        children: r.createdAt
+      }), /* @__PURE__ */ e(i.Actions, {
+        children: (o) => t ? /* @__PURE__ */ e(u, {
+          ...t,
+          item: r,
+          onOpenChange: o,
+          viewMode: s.GRID
+        }) : null
+      })]
+    }, r.id))
+  });
+};
+export {
+  w as MetadataGrid,
+  w as default
+};

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

@@ -1,11 +1,12 @@
 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 { I as M, s as l, T as N } from "../../../../chunks/table-body-with-data.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 v = ({
-  columns: r,
+const L = ({
+  columns: l,
   isLoading: i,
   iconColumnVariant: o,
   isSelectAllEnabled: d,
@@ -14,18 +15,18 @@ const v = ({
   ...u
 }) => {
   const {
-    formatMessage: n
+    formatMessage: m
   } = y(), a = [];
-  o === M.COLUMN && a.push({
+  o === N.COLUMN && a.push({
     id: "item-type-icon",
     isRowHeader: !1,
     hideHeader: !1,
     maxWidth: 60,
     minWidth: 60
   });
-  const b = r.map((s) => {
+  const b = l.map((s) => {
     const {
-      id: m,
+      id: n,
       headerRenderer: c,
       textValue: t,
       ...H
@@ -35,20 +36,20 @@ const v = ({
         as: "span",
         children: t
       }),
-      isRowHeader: m === "name",
-      id: m,
+      isRowHeader: n === "name",
+      id: n,
       textValue: t,
       ...H
     };
   });
   return a.push(...b), d && a.push({
     id: "actions",
-    className: l.tableHeaderActions,
+    className: r.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
-      className: l.tableHeaderActionsWrapper,
+      className: r.tableHeaderActionsWrapper,
       children: /* @__PURE__ */ e(T, {
-        "aria-label": n(h.selectAll),
-        className: l.selectAllCheckbox,
+        "aria-label": m(h.selectAll),
+        className: r.selectAllCheckbox,
         isDisabled: i
       })
     }),
@@ -56,7 +57,7 @@ const v = ({
     hideHeader: !1,
     allowsSorting: !1
   }), /* @__PURE__ */ R(g, {
-    "aria-label": n(h.listView),
+    "aria-label": m(h.listView),
     selectionBehavior: "toggle",
     selectionMode: "multiple",
     ...u,
@@ -67,8 +68,8 @@ const v = ({
       })
     }), i ? /* @__PURE__ */ e(C, {
       columnLength: a.length
-    }) : /* @__PURE__ */ e(N, {
-      columns: r,
+    }) : /* @__PURE__ */ e(M, {
+      columns: l,
       iconColumnVariant: o,
       isSelectAllEnabled: d,
       itemActionMenuProps: f,
@@ -77,5 +78,5 @@ const v = ({
   });
 };
 export {
-  v as default
+  L as default
 };

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

@@ -2,9 +2,10 @@ import "@box/blueprint-web";
 import "lodash/get";
 import "@box/item-icon";
 import "clsx";
-import { T as f } from "../../../../../chunks/table-body-with-data.js";
+import "../../../../../chunks/types.js";
+import { T as d } from "../../../../../chunks/table-body-with-data.js";
 import "react/jsx-runtime";
 import "../../item-action-menu/item-action-menu.js";
 export {
-  f as default
+  d as default
 };

package/dist/esm/lib/components/switch-case/switch-case.js

@@ -0,0 +1,14 @@
+import e from "react";
+const i = ({
+  condition: r,
+  children: n
+}) => r ? n : null, s = ({
+  children: r
+}) => {
+  const t = e.Children.toArray(r).find((o) => o.props.condition);
+  return t ? t.props.children : null;
+};
+export {
+  i as Case,
+  s as SwitchCase
+};

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

@@ -1,33 +1,56 @@
-import o from "./components/error-state/error-state.js";
-import m from "./components/pagination/pagination.js";
-import { jsxs as e, jsx as r, Fragment as s } from "react/jsx-runtime";
-import { ActionBar as f } from "./components/action-bar/action-bar.js";
-import c from "./components/empty-state/empty-state.js";
-import p from "./components/metadata-table/metadata-table.js";
-import '../../styles/metadata-view.css';const d = {};
-function l(t) {
-  return !t.isLoading && t.items.length === 0 ? /* @__PURE__ */ r(c, {}) : /* @__PURE__ */ r(p, {
-    ...t
-  });
-}
-function x({
-  filterRowProps: t,
-  metadataTableProps: a,
-  hasError: i,
-  onRefresh: n
+import { useState as h } from "react";
+import M from "./components/error-state/error-state.js";
+import S from "./components/pagination/pagination.js";
+import { MetadataGrid as w } from "./components/metadata-grid/metadata-grid.js";
+import { V as t } from "../../chunks/types.js";
+import { SwitchCase as I, Case as e } from "./components/switch-case/switch-case.js";
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { ActionBar as T } from "./components/action-bar/action-bar.js";
+import V from "./components/empty-state/empty-state.js";
+import C from "./components/metadata-table/metadata-table.js";
+import '../../styles/metadata-view.css';const L = {};
+function b({
+  actionBarProps: d,
+  tableProps: r,
+  hasError: c,
+  onRefresh: s,
+  initialViewMode: l = t.LIST,
+  ...n
 }) {
-  return /* @__PURE__ */ e("div", {
-    className: d.container,
-    children: [/* @__PURE__ */ r(f, {
-      filterRowProps: t
-    }), i ? /* @__PURE__ */ r(o, {
-      onRefresh: n
-    }) : /* @__PURE__ */ e(s, {
-      children: [l(a), /* @__PURE__ */ r(m, {})]
-    })]
+  const [i, a] = h(l), p = () => {
+    i === t.LIST ? a(t.GRID) : a(t.LIST);
+  }, f = !r.isLoading && n.items.length === 0;
+  return /* @__PURE__ */ m("div", {
+    className: L.container,
+    children: [/* @__PURE__ */ o(T, {
+      ...d,
+      onViewModeClick: p,
+      viewMode: i
+    }), /* @__PURE__ */ m(I, {
+      children: [/* @__PURE__ */ o(e, {
+        condition: c,
+        children: /* @__PURE__ */ o(M, {
+          onRefresh: s
+        })
+      }), /* @__PURE__ */ o(e, {
+        condition: f,
+        children: /* @__PURE__ */ o(V, {})
+      }), /* @__PURE__ */ o(e, {
+        condition: i === t.LIST,
+        children: /* @__PURE__ */ o(C, {
+          ...n,
+          ...r
+        })
+      }), /* @__PURE__ */ o(e, {
+        condition: i === t.GRID,
+        children: /* @__PURE__ */ o(w, {
+          ...n
+        })
+      })]
+    }), /* @__PURE__ */ o(S, {})]
   });
 }
 export {
-  x as MetadataView,
-  x as default
+  b as MetadataView,
+  b as default
 };