@box/metadata-view 0.29.3 → 0.30.0

package/dist/esm/lib/components/filter-row/filter-row.js

@@ -1,6 +1,6 @@
-import { useState as C, useRef as S } from "react";
-import { Formik as v, Form as G } from "formik";
-import { FilterChip as I } from "@box/blueprint-web";
+import { FilterChip as C } from "@box/blueprint-web";
+import { Formik as S, Form as v } from "formik";
+import { useState as G, useRef as I } from "react";
 import R from "./all-filters-chip.js";
 import { getInitialFieldValues as g } from "./initial-field-values.js";
 import { MetadataFilterChip as j } from "./metadata-filter-chip.js";
@@ -13,7 +13,7 @@ const z = ({
   isAllFiltersDisabled: p,
   onFilterSubmit: l
 }) => {
-  const [s, c] = C([]), u = w(n), f = ([e, t]) => {
+  const [s, c] = G([]), u = w(n), f = ([e, t]) => {
     var r;
     return ((r = t.value) == null ? void 0 : r.enum) && t.value.enum.length > 0;
   }, h = ({
@@ -25,13 +25,13 @@ const z = ({
     c(t), l && l(e);
   }, o = [...u, ...d], m = o.flatMap(({
     filters: e
-  }) => e), F = g(m), a = S(null);
-  return /* @__PURE__ */ i(v, {
+  }) => e), F = g(m), a = I(null);
+  return /* @__PURE__ */ i(S, {
     initialValues: F,
     onSubmit: h,
-    children: /* @__PURE__ */ i(G, {
+    children: /* @__PURE__ */ i(v, {
       ref: a,
-      children: /* @__PURE__ */ b(I.Group, {
+      children: /* @__PURE__ */ b(C.Group, {
         className: x.filterChipGroup,
         name: "metadata-view-filters",
         type: "multiple",

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

@@ -1,167 +1,182 @@
-import { TableBody as y, Row as L, Cell as a, ActionCell as x, Text as p } from "@box/blueprint-web";
+import { TableBody as y, Row as E, Cell as d, ActionCell as L, Text as p } from "@box/blueprint-web";
 import { ItemTypeIcon as C } from "@box/item-icon";
-import R from "clsx";
-import N from "lodash/get";
-import d from "react";
+import x from "clsx";
+import T from "lodash/get";
+import s from "react";
 import { I as h } from "../../../../../chunks/types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as S } from "../../constants.js";
-import b from "./ghost-row/ghost-row.js";
-import { s as m, T as w } from "../../../../../chunks/table-row.js";
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { ItemActionMenu as E } from "../../item-action-menu/item-action-menu.js";
-const g = /* @__PURE__ */ d.memo(({
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as b } from "../../constants.js";
+import g from "./ghost-row/ghost-row.js";
+import { s as f, T as w } from "../../../../../chunks/table-row.js";
+import { jsx as r, jsxs as N } from "react/jsx-runtime";
+import { ItemActionMenu as R } from "../../item-action-menu/item-action-menu.js";
+const S = /* @__PURE__ */ s.memo(({
   item: t,
   column: e,
-  iconColumnVariant: o
+  iconColumnVariant: n
 }) => {
   const {
     id: l,
-    subTitle: c
-  } = e, i = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(a, {
-    children: /* @__PURE__ */ f("div", {
-      className: m.tableNameCell,
+    subTitle: a
+  } = e, c = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(d, {
+    children: /* @__PURE__ */ N("div", {
+      className: f.tableNameCell,
       children: [/* @__PURE__ */ r(C, {
         item: t
-      }), /* @__PURE__ */ f("div", {
-        className: R({
-          [m.tableNameCellSubTitle]: o === h.INLINE_SUBTITLE
+      }), /* @__PURE__ */ N("div", {
+        className: x({
+          [f.tableNameCellSubTitle]: n === h.INLINE_SUBTITLE
         }),
         children: [/* @__PURE__ */ r(p, {
           as: "span",
-          children: N(t, l)
-        }), o === h.INLINE_SUBTITLE && /* @__PURE__ */ r(p, {
+          children: T(t, l)
+        }), n === h.INLINE_SUBTITLE && /* @__PURE__ */ r(p, {
           as: "span",
           color: "textOnLightSecondary",
-          children: c
+          children: a
         })]
       })]
     })
-  }, i);
-}), B = /* @__PURE__ */ d.memo(({
+  }, c);
+}), k = /* @__PURE__ */ s.memo(({
   item: t,
   column: e
 }) => {
   var l;
-  const o = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(a, {
+  const n = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(d, {
     children: (l = e.cellRenderer) == null ? void 0 : l.call(e, t, e)
-  }, o);
-}), _ = /* @__PURE__ */ d.memo(({
+  }, n);
+}), B = /* @__PURE__ */ s.memo(({
   item: t,
   column: e
 }) => {
-  const o = `${e.textValue}-${t.id}`, l = N(t, e.id);
-  return l ? /* @__PURE__ */ r(a, {
+  const n = `${e.textValue}-${t.id}`, l = T(t, e.id);
+  return l ? /* @__PURE__ */ r(d, {
     children: l.join(" ")
-  }, o) : /* @__PURE__ */ r(a, {}, o);
-}), k = /* @__PURE__ */ d.memo(({
+  }, n) : /* @__PURE__ */ r(d, {}, n);
+}), _ = /* @__PURE__ */ s.memo(({
   item: t,
   column: e
 }) => {
-  const o = `${e.textValue}-${t.id}`;
-  return /* @__PURE__ */ r(a, {
+  const n = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(d, {
     children: /* @__PURE__ */ r(p, {
       as: "span",
-      children: N(t, e.id)
+      children: T(t, e.id)
     })
-  }, o);
-}), U = /* @__PURE__ */ d.memo(({
+  }, n);
+}), U = /* @__PURE__ */ s.memo(({
+  item: t,
+  column: e
+}) => {
+  const n = `${e.textValue}-${t.id}`;
+  return /* @__PURE__ */ r(d, {
+    children: /* @__PURE__ */ N(p, {
+      as: "span",
+      children: [T(t, e.id), " withInlineEditing"]
+    })
+  }, n);
+}), W = /* @__PURE__ */ s.memo(({
   item: t,
   column: e,
-  iconColumnVariant: o
+  iconColumnVariant: n
 }) => {
   const {
     cellRenderer: l,
-    id: c,
-    type: i
+    id: a,
+    isInlineEditingEnabled: c,
+    type: I
   } = e;
-  return c === "name" && (o === h.INLINE || o === h.INLINE_SUBTITLE) ? /* @__PURE__ */ r(g, {
+  return a === "name" && (n === h.INLINE || n === h.INLINE_SUBTITLE) ? /* @__PURE__ */ r(S, {
+    column: e,
+    iconColumnVariant: n,
+    item: t
+  }) : l ? /* @__PURE__ */ r(k, {
     column: e,
-    iconColumnVariant: o,
     item: t
-  }) : l ? /* @__PURE__ */ r(B, {
+  }) : I === "multiSelect" ? /* @__PURE__ */ r(B, {
     column: e,
     item: t
-  }) : i === "multiSelect" ? /* @__PURE__ */ r(_, {
+  }) : c && I === "enum" ? /* @__PURE__ */ r(U, {
     column: e,
     item: t
-  }) : /* @__PURE__ */ r(k, {
+  }) : /* @__PURE__ */ r(_, {
     column: e,
     item: t
   });
-}), W = /* @__PURE__ */ d.memo(({
+}), j = /* @__PURE__ */ s.memo(({
   item: t,
   zoomLevel: e
-}) => /* @__PURE__ */ r(a, {
+}) => /* @__PURE__ */ r(d, {
   style: {
-    height: S[e]
+    height: b[e]
   },
   children: /* @__PURE__ */ r(C, {
-    className: m.iconCell,
+    className: f.iconCell,
     item: t
   })
-}, `item-type-icon-${t.id}`)), j = /* @__PURE__ */ d.memo(({
+}, `item-type-icon-${t.id}`)), D = /* @__PURE__ */ s.memo(({
   item: t,
   itemActionMenuProps: e
-}) => /* @__PURE__ */ r(x, {
-  children: (o) => e ? /* @__PURE__ */ r(E, {
+}) => /* @__PURE__ */ r(L, {
+  children: (n) => e ? /* @__PURE__ */ r(R, {
     ...e,
     item: t,
-    onOpenChange: o
+    onOpenChange: n
   }) : null
-})), J = ({
+})), Q = ({
   columns: t,
   iconColumnVariant: e,
-  isSelectAllEnabled: o,
+  isSelectAllEnabled: n,
   items: l,
-  itemActionMenuProps: c,
-  virtualItems: i,
-  columnCount: T,
+  itemActionMenuProps: a,
+  virtualItems: c,
+  columnCount: I,
   zoomLevel: u
 }) => {
   const $ = e === h.COLUMN;
-  if (i) {
-    const n = (s) => /* @__PURE__ */ r(b, {
-      columnLength: T || 0,
-      rowKey: `ghost-${s}`
-    }), I = (s) => /* @__PURE__ */ r(w, {
+  if (c) {
+    const o = (i) => /* @__PURE__ */ r(g, {
+      columnLength: I || 0,
+      rowKey: `ghost-${i}`
+    }), m = (i) => /* @__PURE__ */ r(w, {
       columns: t,
       iconColumnVariant: e,
-      isSelectAllEnabled: o,
-      item: s,
-      itemActionMenuProps: c,
+      isSelectAllEnabled: n,
+      item: i,
+      itemActionMenuProps: a,
       zoomLevel: u
     });
     return /* @__PURE__ */ r(y, {
-      items: i,
+      items: c,
       children: ({
-        index: s
-      }) => s >= l.length ? n(s) : I(l[s])
+        index: i
+      }) => i >= l.length ? o(i) : m(l[i])
     });
   }
   return /* @__PURE__ */ r(y, {
-    items: l.map((n) => ({
-      key: n.id,
-      ...n
+    items: l.map((o) => ({
+      key: o.id,
+      ...o
     })),
-    children: (n) => /* @__PURE__ */ f(L, {
-      className: m.tableRow,
-      id: n.id,
-      children: [$ && /* @__PURE__ */ r(W, {
-        item: n,
+    children: (o) => /* @__PURE__ */ N(E, {
+      className: f.tableRow,
+      id: o.id,
+      children: [$ && /* @__PURE__ */ r(j, {
+        item: o,
         zoomLevel: u
-      }), t.map((I) => /* @__PURE__ */ r(U, {
-        column: I,
+      }), t.map((m) => /* @__PURE__ */ r(W, {
+        column: m,
         iconColumnVariant: e,
-        item: n
-      }, `${I.textValue}-${n.id}`)), o && /* @__PURE__ */ r(j, {
-        item: n,
-        itemActionMenuProps: c
+        item: o
+      }, `${m.textValue}-${o.id}`)), n && /* @__PURE__ */ r(D, {
+        item: o,
+        itemActionMenuProps: a
       })]
-    }, n.id)
+    }, o.id)
   });
 };
 export {
-  J as default
+  Q as default
 };

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

@@ -24,11 +24,11 @@ function W({
   isLoading: s,
   ...r
 }) {
-  const [e, p] = f(S), V = () => {
+  const [e, p] = f(S), [a, V] = f(0), w = () => {
     e === o.LIST ? p(o.GRID) : p(o.LIST);
-  }, w = !s && r.items.length === 0, v = i && i.sortDropdownProps && c.filter((n) => n.type !== "multiSelect" && n.type !== "enum").map((n) => n.textValue), {
+  }, v = !s && r.items.length === 0, y = i && i.sortDropdownProps && c.filter((n) => n.type !== "multiSelect" && n.type !== "enum").map((n) => n.textValue), {
     iconColumnVariant: C
-  } = l || {}, y = C && C === b.COLUMN, [a, L] = f(0);
+  } = l || {}, L = C && C === b.COLUMN;
   return /* @__PURE__ */ t(T, {
     children: /* @__PURE__ */ t("div", {
       className: M.container,
@@ -37,17 +37,17 @@ function W({
       }) : /* @__PURE__ */ h(g, {
         children: [/* @__PURE__ */ t(k, {
           ...i,
-          isIconColumnEnabled: y,
-          onViewModeClick: V,
-          onZoomLevelChange: L,
-          sortableColumnNames: v,
+          isIconColumnEnabled: L,
+          onViewModeClick: w,
+          onZoomLevelChange: V,
+          sortableColumnNames: y,
           viewMode: e,
           zoomLevel: a
         }), /* @__PURE__ */ t("div", {
           className: M.contentContainer,
           children: /* @__PURE__ */ h(N, {
             children: [/* @__PURE__ */ t(m, {
-              condition: w,
+              condition: v,
               children: /* @__PURE__ */ t(D, {})
             }), /* @__PURE__ */ t(m, {
               condition: e === o.LIST,

package/dist/types/lib/test-utils/mock-data.d.ts

@@ -12,6 +12,7 @@ import { Column } from '../types';
 export declare const getMockFilterGroups: (filters: FilterOption[]) => Array<FilterGroup>;
 export declare const mockActiveFilterIds: string[];
 export declare const mockColumnData: Column[];
+export declare const mockColumnDataWithInlineEditingEnabled: Column[];
 export declare const mockFilterOptions: FilterOption[];
 export declare const mockFilterOptionsNoSelection: FilterOption[];
 export declare const mockFilterOptionsWithCustomFilterChips: FilterOption[];

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

@@ -7,6 +7,7 @@ export interface Column extends Partial<ColumnProps> {
     cellRenderer?: (item: Item, column: Column) => React.ReactNode | undefined;
     headerRenderer?: (name: string, column: Column) => React.ReactNode | undefined;
     id: string;
+    isInlineEditingEnabled?: boolean;
     subTitle?: string;
     textValue: string | null;
     type: MetadataFieldType | null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.29.3",
+    "version": "0.30.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -20,10 +20,10 @@
     "devDependencies": {
         "@box/blueprint-web": "^11.12.0",
         "@box/blueprint-web-assets": "^4.61.3",
-        "@box/box-item-type-selector": "^0.61.11",
+        "@box/box-item-type-selector": "^0.61.12",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.16.11",
-        "@box/metadata-filter": "^1.16.11",
+        "@box/item-icon": "^0.16.12",
+        "@box/metadata-filter": "^1.16.12",
         "@box/storybook-utils": "0.13.16",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",