@box/metadata-view 0.9.0 → 0.10.0

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

@@ -1,95 +1,75 @@
-import { Text as m, ListCheckbox as x, Table as _, TableHeader as C, Column as k, TableBody as y, Row as g, Cell as b, ActionCell as w } from "@box/blueprint-web";
-import R from "lodash/get";
-import { useIntl as T } from "react-intl";
-import { ItemActionMenu as N } from "../item-action-menu/item-action-menu.js";
-import f from "./messages.js";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import '../../../../styles/metadata-table.css';const W = "_tableHeaderActionsWrapper_hf6y3_1", I = "_tableHeaderActions_hf6y3_1", M = "_selectAllCheckbox_hf6y3_33", o = {
-  tableHeaderActionsWrapper: W,
-  tableHeaderActions: I,
-  selectAllCheckbox: M
-}, q = ({
-  columns: c,
-  isSelectAllEnabled: n,
-  items: A,
-  itemActionMenuProps: i,
-  ...H
+import { Text as A, ListCheckbox as H, Table as x, TableHeader as u, Column as _ } from "@box/blueprint-web";
+import { useIntl as g } from "react-intl";
+import y from "./table-body/ghost-table-body.js";
+import C from "./table-body/table-body-with-data.js";
+import h from "./messages.js";
+import { jsx as e, jsxs as T } from "react/jsx-runtime";
+import '../../../../styles/metadata-table.css';const k = "_tableHeaderActionsWrapper_hf6y3_1", W = "_tableHeaderActions_hf6y3_1", w = "_selectAllCheckbox_hf6y3_33", s = {
+  tableHeaderActionsWrapper: k,
+  tableHeaderActions: W,
+  selectAllCheckbox: w
+}, D = ({
+  columns: r,
+  isLoading: o,
+  isSelectAllEnabled: c,
+  items: m,
+  itemActionMenuProps: b,
+  ...p
 }) => {
   const {
-    formatMessage: d
-  } = T(), h = c.map((e) => {
+    formatMessage: i
+  } = g(), l = r.map((a) => {
     const {
-      id: a,
-      headerRenderer: r,
+      id: n,
+      headerRenderer: d,
       textValue: t,
-      ...s
-    } = e;
+      ...f
+    } = a;
     return {
-      children: r ? r(t, e) : /* @__PURE__ */ l(m, {
+      children: d ? d(t, a) : /* @__PURE__ */ e(A, {
         as: "span",
         children: t
       }),
-      isRowHeader: a === "name",
-      id: a,
+      isRowHeader: n === "name",
+      id: n,
       textValue: t,
-      ...s
+      ...f
     };
   });
-  return n && h.push({
+  return c && l.push({
     id: "actions",
-    className: o.tableHeaderActions,
-    children: /* @__PURE__ */ l("div", {
-      className: o.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ l(x, {
-        "aria-label": d(f.selectAll),
-        className: o.selectAllCheckbox
+    className: s.tableHeaderActions,
+    children: /* @__PURE__ */ e("div", {
+      className: s.tableHeaderActionsWrapper,
+      children: /* @__PURE__ */ e(H, {
+        "aria-label": i(h.selectAll),
+        className: s.selectAllCheckbox,
+        isDisabled: o
       })
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1
-  }), /* @__PURE__ */ u(_, {
-    "aria-label": d(f.listView),
+  }), /* @__PURE__ */ T(x, {
+    "aria-label": i(h.listView),
     selectionBehavior: "toggle",
     selectionMode: "multiple",
-    ...H,
-    children: [/* @__PURE__ */ l(C, {
-      columns: h,
-      children: (e) => /* @__PURE__ */ l(k, {
-        ...e
+    ...p,
+    children: [/* @__PURE__ */ e(u, {
+      columns: l,
+      children: (a) => /* @__PURE__ */ e(_, {
+        ...a
       })
-    }), /* @__PURE__ */ l(y, {
-      items: A.map((e) => ({
-        key: e.id,
-        ...e
-      })),
-      children: (e) => /* @__PURE__ */ u(g, {
-        id: e.id,
-        children: [c.map((a) => {
-          const {
-            cellRenderer: r,
-            id: t,
-            textValue: s
-          } = a, p = `${s}-${e.id}`;
-          return r ? /* @__PURE__ */ l(b, {
-            children: r(e, a)
-          }, p) : /* @__PURE__ */ l(b, {
-            children: /* @__PURE__ */ l(m, {
-              as: "span",
-              children: R(e, t)
-            })
-          }, p);
-        }), n && /* @__PURE__ */ l(w, {
-          children: (a) => i ? /* @__PURE__ */ l(N, {
-            ...i,
-            item: e,
-            onOpenChange: a
-          }) : null
-        })]
-      }, e.id)
+    }), o ? /* @__PURE__ */ e(y, {
+      columnLength: l.length
+    }) : /* @__PURE__ */ e(C, {
+      columns: r,
+      isSelectAllEnabled: c ?? !1,
+      itemActionMenuProps: b,
+      items: m
     })]
   });
 };
 export {
-  q as default
+  D as default
 };

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

@@ -0,0 +1,28 @@
+import { TableBody as i, Row as h, Cell as d, Ghost as m } from "@box/blueprint-web";
+import { Size5 as n } from "@box/blueprint-web-assets/tokens/tokens";
+import { jsx as t } from "react/jsx-runtime";
+const s = 20, g = ({
+  columnLength: o,
+  rowLength: a = s
+}) => /* @__PURE__ */ t(i, {
+  items: Array.from({
+    length: a
+  }, (e, r) => ({
+    key: r
+  })),
+  children: (e) => /* @__PURE__ */ t(h, {
+    "data-testid": "metadata-table-ghost-row",
+    children: Array.from({
+      length: o
+    }, (r, l) => /* @__PURE__ */ t(d, {
+      children: /* @__PURE__ */ t(m, {
+        height: n,
+        variant: "rectangle",
+        width: "100%"
+      })
+    }, l))
+  }, e.key)
+});
+export {
+  g as default
+};

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

@@ -0,0 +1,42 @@
+import { TableBody as h, Row as m, Cell as t, Text as p, ActionCell as f } from "@box/blueprint-web";
+import x from "lodash/get";
+import { ItemActionMenu as y } from "../../item-action-menu/item-action-menu.js";
+import { jsx as e, jsxs as T } from "react/jsx-runtime";
+const C = ({
+  columns: i,
+  isSelectAllEnabled: a,
+  items: c,
+  itemActionMenuProps: n
+}) => /* @__PURE__ */ e(h, {
+  items: c.map((r) => ({
+    key: r.id,
+    ...r
+  })),
+  children: (r) => /* @__PURE__ */ T(m, {
+    id: r.id,
+    children: [i.map((l) => {
+      const {
+        cellRenderer: d,
+        id: s,
+        textValue: u
+      } = l, o = `${u}-${r.id}`;
+      return d ? /* @__PURE__ */ e(t, {
+        children: d(r, l)
+      }, o) : /* @__PURE__ */ e(t, {
+        children: /* @__PURE__ */ e(p, {
+          as: "span",
+          children: x(r, s)
+        })
+      }, o);
+    }), a && /* @__PURE__ */ e(f, {
+      children: (l) => n ? /* @__PURE__ */ e(y, {
+        ...n,
+        item: r,
+        onOpenChange: l
+      }) : null
+    })]
+  }, r.id)
+});
+export {
+  C as default
+};

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

@@ -4,9 +4,10 @@ import { ItemActionMenuProps } from '../item-action-menu/item-action-menu';
 import { Column } from '../../types';
 export interface MetadataTableProps extends TableProps {
     columns: Column[];
+    isLoading?: boolean;
     isSelectAllEnabled?: boolean;
     items: Item[];
     itemActionMenuProps?: Omit<ItemActionMenuProps, 'item' | 'onOpenChange'>;
 }
-declare const MetadataTable: ({ columns, isSelectAllEnabled, items, itemActionMenuProps, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
+declare const MetadataTable: ({ columns, isLoading, isSelectAllEnabled, items, itemActionMenuProps, ...tableProps }: MetadataTableProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataTable;

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

@@ -0,0 +1,6 @@
+export interface GhostTableBodyProps {
+    columnLength: number;
+    rowLength?: number;
+}
+declare const GhostTableBody: ({ columnLength, rowLength }: GhostTableBodyProps) => import("react/jsx-runtime").JSX.Element;
+export default GhostTableBody;

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

@@ -0,0 +1,11 @@
+import { Item } from '@box/types';
+import { Column } from '../../../types';
+import { ItemActionMenuProps } from '../../item-action-menu/item-action-menu';
+export interface BodyProps {
+    columns: Column[];
+    isSelectAllEnabled: boolean;
+    items: Item[];
+    itemActionMenuProps?: Omit<ItemActionMenuProps, 'item' | 'onOpenChange'>;
+}
+declare const TableBodyWithData: ({ columns, isSelectAllEnabled, items, itemActionMenuProps }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export default TableBodyWithData;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.9.0",
+    "version": "0.10.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",