@box/metadata-view 0.37.1 → 0.38.0

package/dist/esm/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js

@@ -1,37 +1,42 @@
-import { Cell as c, DropdownMenu as l, Button as a } from "@box/blueprint-web";
-import { CaretDown as g } from "@box/blueprint-web-assets/icons/Fill";
-import h from "lodash/get";
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import '../../../../../../styles/inline-editing-cell.css';const E = "_inlineEditingCell_1xsiq_1", p = {
+import { Cell as f, DropdownMenu as r, Button as h } from "@box/blueprint-web";
+import { CaretDown as C } from "@box/blueprint-web-assets/icons/Fill";
+import m from "lodash/get";
+import { jsx as t, jsxs as p } from "react/jsx-runtime";
+import '../../../../../../styles/inline-editing-cell.css';const E = "_inlineEditingCell_1iieg_1", w = {
   inlineEditingCell: E
-}, I = ({
+}, y = ({
   column: n,
-  item: d,
-  onInlineEditChange: r
+  item: l,
+  onInlineEditChange: s,
+  type: c
 }) => {
-  const s = `${n.id}-${d.id}`, e = h(d, n.id) || "--", o = (i, f) => {
-    r(d, i, n.id);
+  const o = `${n.id}-${l.id}`, d = m(l, n.id) || "--", e = typeof d == "string" ? [d] : d, a = (i) => {
+    if (c === "multiSelect") {
+      const g = [...e, i];
+      s(l, g, n.id);
+    }
+    c === "enum" && s(l, i, n.id);
   };
-  return /* @__PURE__ */ t(c, {
-    children: /* @__PURE__ */ C(l.Root, {
-      children: [/* @__PURE__ */ t(l.Trigger, {
-        children: /* @__PURE__ */ t(a, {
-          className: p.inlineEditingCell,
-          icon: g,
+  return /* @__PURE__ */ t(f, {
+    children: /* @__PURE__ */ p(r.Root, {
+      children: [/* @__PURE__ */ t(r.Trigger, {
+        children: /* @__PURE__ */ t(h, {
+          className: w.inlineEditingCell,
+          icon: C,
           variant: "secondary",
-          children: e
+          children: e.join(", ")
         })
-      }), /* @__PURE__ */ t(l.Content, {
+      }), /* @__PURE__ */ t(r.Content, {
         align: "start",
-        children: n.inlineEditingOptions && n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(l.CheckboxItem, {
+        children: n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(r.CheckboxItem, {
           checked: e === i || (e == null ? void 0 : e.includes(i)),
-          onSelect: () => o(i, n.id),
+          onSelect: () => a(i),
           children: i
         }, i))
       })]
     })
-  }, s);
+  }, o);
 };
 export {
-  I as default
+  y as default
 };

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

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

package/dist/styles/inline-editing-cell.css

@@ -1 +1 @@
-._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1{display:inline-flex;gap:var(--space-2);align-items:center;padding:var(--space-1);font-weight:var(--font-weights-regular);background-color:transparent;border:transparent}._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1._inlineEditingCell_1xsiq_1:hover{background-color:transparent;border:transparent}
+._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1{display:inline-flex;gap:var(--space-2);align-items:center;justify-content:flex-start;width:100%;padding:var(--space-1);font-weight:var(--font-weights-regular);background-color:transparent;border:transparent}._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1:hover{background-color:transparent;border:transparent}._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1._inlineEditingCell_1iieg_1>span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}

package/dist/types/lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.d.ts

@@ -3,7 +3,8 @@ import { Column } from '../../../../types';
 interface InlineEditingCellProps {
     column: Column;
     item: Item;
-    onInlineEditChange: (item: Item, value: string, columnId: string) => void;
+    onInlineEditChange: (item: Item, selection: string | string[], columnId: string) => void;
+    type: 'multiSelect' | 'enum';
 }
-declare const InlineEditingCell: ({ column, item, onInlineEditChange }: InlineEditingCellProps) => import("react/jsx-runtime").JSX.Element;
+declare const InlineEditingCell: ({ column, item, onInlineEditChange, type }: InlineEditingCellProps) => import("react/jsx-runtime").JSX.Element;
 export default InlineEditingCell;

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

@@ -13,6 +13,7 @@ export declare const getMockFilterGroups: (filters: FilterOption[]) => Array<Fil
 export declare const mockActiveFilterIds: string[];
 export declare const mockColumnData: Column[];
 export declare const mockColumnDataWithInlineEditingEnabled: Column[];
+export declare const mockColumnDataWithInlineEditingEnabledAndMultiSelect: Column[];
 export declare const mockFilterOptions: FilterOption[];
 export declare const mockFilterOptionsNoSelection: FilterOption[];
 export declare const mockFilterOptionsWithCustomFilterChips: FilterOption[];

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.37.1",
+    "version": "0.38.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -23,7 +23,7 @@
         "@box/box-item-type-selector": "^0.63.7",
         "@box/eslint-plugin-blueprint": "*",
         "@box/item-icon": "^0.17.10",
-        "@box/metadata-filter": "^1.18.7",
+        "@box/metadata-filter": "^1.18.8",
         "@box/storybook-utils": "0.13.18",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",