@box/metadata-view 0.12.0 → 0.13.1

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

@@ -0,0 +1,80 @@
+import { TableBody as L, Row as x, Cell as c, Text as i, 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,
+  tableHeaderActions: S,
+  selectAllCheckbox: y,
+  tableNameCell: j,
+  tableNameCellSubTitle: B
+}, g = ({
+  columns: t,
+  iconColumnVariant: r,
+  isSelectAllEnabled: _,
+  items: T,
+  itemActionMenuProps: b
+}) => /* @__PURE__ */ l(L, {
+  items: T.map((e) => ({
+    key: e.id,
+    ...e
+  })),
+  children: (e) => /* @__PURE__ */ o(x, {
+    id: e.id,
+    children: [r === a.COLUMN ? /* @__PURE__ */ l(c, {
+      children: /* @__PURE__ */ l(p, {
+        item: e
+      })
+    }, `item-type-icon-${e.id}`) : null, t.map((s) => {
+      const {
+        cellRenderer: N,
+        id: n,
+        subTitle: m,
+        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,
+          children: [/* @__PURE__ */ l(p, {
+            item: e
+          }), /* @__PURE__ */ o("div", {
+            className: E({
+              [I.tableNameCellSubTitle]: r === a.INLINE_SUBTITLE
+            }),
+            children: [/* @__PURE__ */ l(i, {
+              as: "span",
+              children: h(e, n)
+            }), r === a.INLINE_SUBTITLE ? /* @__PURE__ */ l(i, {
+              as: "span",
+              color: "textOnLightSecondary",
+              children: m
+            }) : null]
+          })]
+        })
+      }, d) : N ? /* @__PURE__ */ l(c, {
+        children: N(e, s)
+      }, d) : /* @__PURE__ */ l(c, {
+        children: /* @__PURE__ */ l(i, {
+          as: "span",
+          children: h(e, n)
+        })
+      }, d);
+    }), _ && /* @__PURE__ */ l(A, {
+      children: (s) => b ? /* @__PURE__ */ l(f, {
+        ...b,
+        item: e,
+        onOpenChange: s
+      }) : null
+    })]
+  }, e.id)
+});
+export {
+  a as I,
+  g as T,
+  I as s
+};

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

@@ -1,75 +1,81 @@
-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 { 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 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 = ({
+import { jsx as e, jsxs as R } from "react/jsx-runtime";
+const v = ({
   columns: r,
-  isLoading: o,
-  isSelectAllEnabled: c,
-  items: m,
-  itemActionMenuProps: b,
-  ...p
+  isLoading: i,
+  iconColumnVariant: o,
+  isSelectAllEnabled: d,
+  items: p,
+  itemActionMenuProps: f,
+  ...u
 }) => {
   const {
-    formatMessage: i
-  } = g(), l = r.map((a) => {
+    formatMessage: n
+  } = y(), a = [];
+  o === M.COLUMN && a.push({
+    id: "item-type-icon",
+    isRowHeader: !1,
+    hideHeader: !1,
+    maxWidth: 60,
+    minWidth: 60
+  });
+  const b = r.map((s) => {
     const {
-      id: n,
-      headerRenderer: d,
+      id: m,
+      headerRenderer: c,
       textValue: t,
-      ...f
-    } = a;
+      ...H
+    } = s;
     return {
-      children: d ? d(t, a) : /* @__PURE__ */ e(A, {
+      children: c ? c(t, s) : /* @__PURE__ */ e(x, {
         as: "span",
         children: t
       }),
-      isRowHeader: n === "name",
-      id: n,
+      isRowHeader: m === "name",
+      id: m,
       textValue: t,
-      ...f
+      ...H
     };
   });
-  return c && l.push({
+  return a.push(...b), d && a.push({
     id: "actions",
-    className: s.tableHeaderActions,
+    className: l.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
-      className: s.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(H, {
-        "aria-label": i(h.selectAll),
-        className: s.selectAllCheckbox,
-        isDisabled: o
+      className: l.tableHeaderActionsWrapper,
+      children: /* @__PURE__ */ e(T, {
+        "aria-label": n(h.selectAll),
+        className: l.selectAllCheckbox,
+        isDisabled: i
       })
     }),
     isRowHeader: !1,
     hideHeader: !1,
     allowsSorting: !1
-  }), /* @__PURE__ */ T(x, {
-    "aria-label": i(h.listView),
+  }), /* @__PURE__ */ R(g, {
+    "aria-label": n(h.listView),
     selectionBehavior: "toggle",
     selectionMode: "multiple",
-    ...p,
-    children: [/* @__PURE__ */ e(u, {
-      columns: l,
-      children: (a) => /* @__PURE__ */ e(_, {
-        ...a
+    ...u,
+    children: [/* @__PURE__ */ e(w, {
+      columns: a,
+      children: (s) => /* @__PURE__ */ e(W, {
+        ...s
       })
-    }), o ? /* @__PURE__ */ e(y, {
-      columnLength: l.length
-    }) : /* @__PURE__ */ e(C, {
+    }), i ? /* @__PURE__ */ e(C, {
+      columnLength: a.length
+    }) : /* @__PURE__ */ e(N, {
       columns: r,
-      isSelectAllEnabled: c ?? !1,
-      itemActionMenuProps: b,
-      items: m
+      iconColumnVariant: o,
+      isSelectAllEnabled: d,
+      itemActionMenuProps: f,
+      items: p
     })]
   });
 };
 export {
-  D as default
+  v as default
 };

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

@@ -1,42 +1,10 @@
-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)
-});
+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 "react/jsx-runtime";
+import "../../item-action-menu/item-action-menu.js";
 export {
-  C as default
+  f as default
 };

package/dist/styles/table-body-with-data.css

@@ -0,0 +1 @@
+._tableHeaderActionsWrapper_r2hj7_1{position:absolute;top:0;right:var(--size-4);bottom:0;display:flex;gap:var(--space-2);align-items:center;justify-content:center;padding:0 var(--space-2);background:var(--item-background);margin-block:var(--space-2)}._tableHeaderActionsWrapper_r2hj7_1:before{position:absolute;left:0;z-index:0;display:block;width:0;height:50%;box-shadow:-.25rem 0 .625rem .625rem var(--item-background);content:""}._tableHeaderActions_r2hj7_1{position:sticky;right:0;width:var(--size-6);padding:0}._selectAllCheckbox_r2hj7_33 svg{transform:none!important}._tableNameCell_r2hj7_38{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubTitle_r2hj7_44{display:flex;flex-direction:column}

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

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

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

@@ -1,4 +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;
+declare const TableBodyWithData: ({ columns, iconColumnVariant, isSelectAllEnabled, items, itemActionMenuProps, }: Omit<MetadataTableProps, keyof TableProps>) => import("react/jsx-runtime").JSX.Element;
 export default TableBodyWithData;

package/dist/types/lib/types.d.ts

@@ -6,6 +6,12 @@ export interface Column extends Partial<ColumnProps> {
     cellRenderer?: (item: Item, column: Column) => React.ReactNode | undefined;
     headerRenderer?: (name: string, column: Column) => React.ReactNode | undefined;
     id: string;
-    textValue: string;
-    type: MetadataFieldType;
+    subTitle?: string;
+    textValue: string | null;
+    type: MetadataFieldType | null;
+}
+export declare enum IconColumnVariant {
+    INLINE = "inline",
+    COLUMN = "column",
+    INLINE_SUBTITLE = "inline-subtitle"
 }

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.12.0",
+    "version": "0.13.1",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.44.1",
-        "@box/item-icon": "^0.9.168",
+        "@box/item-icon": "^0.9.172",
         "@box/metadata-filter": "^1.8.4",
         "@box/types": "0.1.0",
         "formik": "^2.4.5",
@@ -18,8 +18,8 @@
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.55.0",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.9.172",
-        "@box/metadata-filter": "^1.10.0",
+        "@box/item-icon": "^0.10.1",
+        "@box/metadata-filter": "^1.10.1",
         "@box/storybook-utils": "0.13.8",
         "@box/types": "0.2.0",
         "react-intl": "^6.4.2"

package/dist/styles/metadata-table.css

@@ -1 +0,0 @@
-._tableHeaderActionsWrapper_hf6y3_1{position:absolute;top:0;right:var(--size-4);bottom:0;display:flex;gap:var(--space-2);align-items:center;justify-content:center;padding:0 var(--space-2);background:var(--item-background);margin-block:var(--space-2)}._tableHeaderActionsWrapper_hf6y3_1:before{position:absolute;left:0;z-index:0;display:block;width:0;height:50%;box-shadow:-.25rem 0 .625rem .625rem var(--item-background);content:""}._tableHeaderActions_hf6y3_1{position:sticky;right:0;width:var(--size-6);padding:0}._selectAllCheckbox_hf6y3_33 svg{transform:none!important}