@box/metadata-view 0.9.0 → 0.11.0

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

@@ -0,0 +1,4 @@
+import { ItemActionMenu as t } from "./item-action-menu.js";
+export {
+  t as ItemActionMenu
+};

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

@@ -1,78 +1,84 @@
-import { useIntl as p } from "react-intl";
-import { DropdownMenu as t, IconButton as h } from "@box/blueprint-web";
-import { Ellipsis as f } from "@box/blueprint-web-assets/icons/Fill";
-import g from "./messages.js";
-import { jsx as n, jsxs as o } from "react/jsx-runtime";
-import '../../../../styles/item-action-menu.css';const M = "_tableActionBar_akgtp_1", _ = "_actionItemIcon_akgtp_6", s = {
-  tableActionBar: M,
-  actionItemIcon: _
+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
 };
-function I({
-  item: i,
-  label: c,
-  onClick: r,
-  icon: l
+function b({
+  item: c,
+  label: o,
+  onClick: l,
+  icon: r
 }) {
-  const a = () => {
-    r(i);
+  const i = () => {
+    l(c);
   };
-  return /* @__PURE__ */ o(t.Item, {
-    onClick: a,
-    children: [/* @__PURE__ */ n(l, {
-      className: s.actionItemIcon
-    }), c]
-  }, c);
+  return /* @__PURE__ */ a(t.Item, {
+    onClick: i,
+    children: [/* @__PURE__ */ e(r, {
+      className: m.actionItemIcon
+    }), o]
+  }, o);
 }
-function x({
-  actions: i,
-  isDisabled: c,
+function R({
+  actions: c,
+  inlineActions: o,
+  isDisabled: l,
   item: r,
-  onOpenChange: l,
-  subMenuActions: a,
-  subMenuTrigger: m
+  onOpenChange: i,
+  subMenuActions: s,
+  subMenuTrigger: u
 }) {
   const {
-    formatMessage: d
-  } = p(), {
-    label: b,
-    icon: u
-  } = m || {};
-  return /* @__PURE__ */ n("div", {
-    className: s.tableActionBar,
-    children: /* @__PURE__ */ o(t.Root, {
-      onOpenChange: l,
-      children: [/* @__PURE__ */ n(t.Trigger, {
-        children: /* @__PURE__ */ n(h, {
-          "aria-label": d(g.actionMenu),
-          disabled: c,
-          icon: f,
+    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),
+      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: _,
           size: "large"
         })
-      }), /* @__PURE__ */ o(t.Content, {
+      }), /* @__PURE__ */ a(t.Content, {
         align: "start",
-        children: [i.map(({
-          ...e
-        }) => /* @__PURE__ */ n(I, {
+        children: [c.map((n) => /* @__PURE__ */ e(b, {
           item: r,
-          ...e
-        }, e.label)), a && m && /* @__PURE__ */ o(t.SubMenuRoot, {
-          children: [/* @__PURE__ */ o(t.SubMenuTrigger, {
-            children: [u && /* @__PURE__ */ n(u, {
-              className: s.actionItemIcon
-            }), b]
-          }), /* @__PURE__ */ n(t.SubMenuContent, {
-            children: a.map(({
-              ...e
-            }) => /* @__PURE__ */ n(I, {
+          ...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, {
               item: r,
-              ...e
-            }, e.label))
+              ...n
+            }, n.label))
           })]
         })]
       })]
-    })
+    }) : null]
   });
 }
 export {
-  x as ItemActionMenu
+  R as ItemActionMenu
 };

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

@@ -0,0 +1,4 @@
+import { default as o } from "./metadata-table.js";
+export {
+  o as default
+};

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,27 @@
+import { TableBody as a, Row as h, Cell as n, Ghost as m } from "@box/blueprint-web";
+import { Size5 as d } from "@box/blueprint-web-assets/tokens/tokens";
+import { jsx as r } from "react/jsx-runtime";
+const s = 20, g = ({
+  columnLength: o,
+  rowLength: l = s
+}) => /* @__PURE__ */ r(a, {
+  items: Array.from({
+    length: l
+  }, (e, t) => ({
+    key: t
+  })),
+  children: (e) => /* @__PURE__ */ r(h, {
+    children: Array.from({
+      length: o
+    }, (t, i) => /* @__PURE__ */ r(n, {
+      children: /* @__PURE__ */ r(m, {
+        height: d,
+        variant: "rectangle",
+        width: "100%"
+      })
+    }, i))
+  }, 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/esm/lib/metadata-view.js

@@ -1,19 +1,19 @@
 import r from "./components/filter-row/filter-row.js";
-import e from "./components/metadata-table/metadata-table.js";
-import i from "./components/pagination/pagination.js";
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import e from "./components/pagination/pagination.js";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import m from "./components/metadata-table/metadata-table.js";
 import '../../styles/metadata-view.css';const n = {};
 function d({
   filterRowProps: a,
   metadataTableProps: o
 }) {
-  return /* @__PURE__ */ m("div", {
+  return /* @__PURE__ */ i("div", {
     className: n.container,
     children: [/* @__PURE__ */ t(r, {
       ...a
-    }), /* @__PURE__ */ t(e, {
+    }), /* @__PURE__ */ t(m, {
       ...o
-    }), /* @__PURE__ */ t(i, {})]
+    }), /* @__PURE__ */ t(e, {})]
   });
 }
 export {

package/dist/types/lib/components/item-action-menu/index.d.ts

@@ -0,0 +1 @@
+export * from './item-action-menu';

package/dist/types/lib/components/item-action-menu/item-action-menu.d.ts

@@ -6,7 +6,8 @@ export interface ItemAction {
     icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 }
 export interface ItemActionMenuProps {
-    actions: ItemAction[];
+    actions?: ItemAction[];
+    inlineActions?: ItemAction[];
     isDisabled?: boolean;
     item: Item;
     onOpenChange: (open: boolean) => void;
@@ -16,4 +17,4 @@ export interface ItemActionMenuProps {
         icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
     };
 }
-export declare function ItemActionMenu({ actions, isDisabled, item, onOpenChange, subMenuActions, subMenuTrigger, }: ItemActionMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function ItemActionMenu({ actions, inlineActions, isDisabled, item, onOpenChange, subMenuActions, subMenuTrigger, }: ItemActionMenuProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from './metadata-table';
+export { default } from './metadata-table';

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

@@ -1,12 +1,13 @@
 import { TableProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
-import { ItemActionMenuProps } from '../item-action-menu/item-action-menu';
+import { ItemActionMenuProps } from '../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,4 @@
+import { TableProps } from '@box/blueprint-web';
+import { MetadataTableProps } from '../metadata-table';
+declare const TableBodyWithData: ({ columns, isSelectAllEnabled, items, itemActionMenuProps, }: Omit<MetadataTableProps, keyof TableProps>) => import("react/jsx-runtime").JSX.Element;
+export default TableBodyWithData;

package/dist/types/lib/metadata-view.d.ts

@@ -1,4 +1,4 @@
-import { MetadataTableProps } from './components/metadata-table/metadata-table';
+import { MetadataTableProps } from './components/metadata-table';
 import { FilterRowProps } from './components/filter-row/types';
 export interface MetadataViewProps {
     filterRowProps: FilterRowProps;

package/package.json

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