@box/metadata-view 0.33.0 → 0.35.0

package/dist/chunks/predefined-filter-options-factory.js

@@ -0,0 +1,25 @@
+import i from "lodash/merge";
+let e = /* @__PURE__ */ function(r) {
+  return r.KeywordSearchFilterGroup = "KeywordSearchFilterGroup", r.FileTypeFilterGroup = "FileTypeFilterGroup", r.LocationFilterGroup = "LocationFilterGroup", r;
+}({});
+function l(r = {}) {
+  const o = {
+    [e.KeywordSearchFilterGroup]: {
+      isDisabled: !1
+    },
+    [e.FileTypeFilterGroup]: {
+      isDisabled: !1
+    },
+    [e.LocationFilterGroup]: {
+      isDisabled: !1,
+      triggerCallback: () => {
+        console.error("Custom callback needs to be provided");
+      }
+    }
+  };
+  return i(o, r);
+}
+export {
+  e as P,
+  l as p
+};

package/dist/chunks/table-row.js

@@ -1,87 +1,87 @@
-import { Row as S, Cell as c, Text as s, ActionCell as H } from "@box/blueprint-web";
+import { Row as H, Cell as a, Text as s, ActionCell as L } from "@box/blueprint-web";
 import b from "lodash/get";
-import { ItemTypeIcon as m } from "@box/item-icon";
-import L from "clsx";
+import { ItemTypeIcon as p } from "@box/item-icon";
+import A from "clsx";
 import { I as n } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as A } from "../esm/lib/components/constants.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as x } from "../esm/lib/components/constants.js";
 import { jsxs as _, jsx as e } from "react/jsx-runtime";
-import { ItemActionMenu as x } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/table-row.css';const E = "_tableHeaderActionsWrapper_uw3hc_1", y = "_tableHeaderActions_uw3hc_1", R = "_tableRow_uw3hc_33", g = "_selectAllCheckbox_uw3hc_42", U = "_tableNameCell_uw3hc_47", k = "_tableNameCellSubTitle_uw3hc_53", B = "_infiniteScrollTableContainerFullHeight_uw3hc_58", W = "_iconCell_uw3hc_64", i = {
-  tableHeaderActionsWrapper: E,
-  tableHeaderActions: y,
-  tableRow: R,
-  selectAllCheckbox: g,
-  tableNameCell: U,
-  tableNameCellSubTitle: k,
-  infiniteScrollTableContainerFullHeight: B,
-  iconCell: W
-}, q = ({
+import { ItemActionMenu as E } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/table-row.css';const q = "_tableHeaderActionsWrapper_zlqta_1", z = "_tableHeaderActions_zlqta_1", y = "_tableRow_zlqta_33", R = "_selectAllCheckbox_zlqta_42", g = "_tableNameCell_zlqta_47", w = "_tableNameCellSubtitle_zlqta_53", U = "_infiniteScrollTableContainerFullHeight_zlqta_58", k = "_iconCell_zlqta_64", i = {
+  tableHeaderActionsWrapper: q,
+  tableHeaderActions: z,
+  tableRow: y,
+  selectAllCheckbox: R,
+  tableNameCell: g,
+  tableNameCellSubtitle: w,
+  infiniteScrollTableContainerFullHeight: U,
+  iconCell: k
+}, G = ({
   item: l,
-  columns: N,
+  columns: h,
   iconColumnVariant: t,
-  isSelectAllEnabled: p,
+  isSelectAllEnabled: I,
   itemActionMenuProps: d,
-  zoomLevel: I = 0
+  zoomLevel: u = 0
 }) => {
-  const T = I;
-  return /* @__PURE__ */ _(S, {
+  const C = u;
+  return /* @__PURE__ */ _(H, {
     className: i.tableRow,
     id: l.id,
-    children: [t === n.COLUMN ? /* @__PURE__ */ e(c, {
+    children: [t === n.COLUMN ? /* @__PURE__ */ e(a, {
       style: {
-        height: A[T]
+        height: x[C]
       },
-      children: /* @__PURE__ */ e(m, {
+      children: /* @__PURE__ */ e(p, {
         className: i.iconCell,
         item: l
       })
-    }, `item-type-icon-${l.id}`) : null, N.map((o) => {
+    }, `item-type-icon-${l.id}`) : null, h.map((o) => {
       const {
-        cellRenderer: h,
-        id: a,
-        subTitle: C,
+        cellRenderer: m,
+        id: r,
+        subtitle: T,
         textValue: f,
-        type: w
-      } = o, r = `${f}-${l.id}`;
-      if (a === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
-        return /* @__PURE__ */ e(c, {
+        type: S
+      } = o, c = `${f}-${l.id}`;
+      if (r === "name" && (t === n.INLINE || t === n.INLINE_SUBTITLE))
+        return /* @__PURE__ */ e(a, {
           children: /* @__PURE__ */ _("div", {
             className: i.tableNameCell,
-            children: [/* @__PURE__ */ e(m, {
+            children: [/* @__PURE__ */ e(p, {
               item: l
             }), /* @__PURE__ */ _("div", {
-              className: L({
-                [i.tableNameCellSubTitle]: t === n.INLINE_SUBTITLE
+              className: A({
+                [i.tableNameCellSubtitle]: t === n.INLINE_SUBTITLE
               }),
               children: [/* @__PURE__ */ e(s, {
                 as: "span",
-                children: b(l, a)
+                children: b(l, r)
               }), t === n.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
                 as: "span",
                 color: "textOnLightSecondary",
-                children: C
+                children: T
               }) : null]
             })]
           })
-        }, r);
-      if (h)
-        return /* @__PURE__ */ e(c, {
-          children: h(l, o)
-        }, r);
-      if (w === "multiSelect") {
-        const u = b(l, a);
-        return /* @__PURE__ */ e(c, {
-          children: u ? u.join(" ") : ""
-        }, r);
+        }, c);
+      if (m)
+        return /* @__PURE__ */ e(a, {
+          children: m(l, o)
+        }, c);
+      if (S === "multiSelect") {
+        const N = b(l, r);
+        return /* @__PURE__ */ e(a, {
+          children: N ? N.join(" ") : ""
+        }, c);
       }
-      return /* @__PURE__ */ e(c, {
+      return /* @__PURE__ */ e(a, {
         children: /* @__PURE__ */ e(s, {
           as: "span",
-          children: b(l, a)
+          children: b(l, r)
         })
-      }, r);
-    }), p && /* @__PURE__ */ e(H, {
-      children: (o) => d ? /* @__PURE__ */ e(x, {
+      }, c);
+    }), I && /* @__PURE__ */ e(L, {
+      children: (o) => d ? /* @__PURE__ */ e(E, {
         ...d,
         item: l,
         onOpenChange: o
@@ -90,6 +90,6 @@ import '../styles/table-row.css';const E = "_tableHeaderActionsWrapper_uw3hc_1",
   }, l.id);
 };
 export {
-  q as T,
+  G as T,
   i as s
 };

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

@@ -4,11 +4,11 @@ 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";
-import { usePredefinedFilter as w } from "./use-predefined-filter.js";
+import { usePredefinedFilter as w } from "./predefinedFilters/use-predefined-filter.js";
 import { s as x } from "../../../../chunks/form-filter-chip.js";
 import { jsx as i, jsxs as b } from "react/jsx-runtime";
 const z = ({
-  disabledPredefinedFilters: n = [],
+  predefinedFilterOptions: n,
   filterGroups: d = [],
   isAllFiltersDisabled: p,
   onFilterSubmit: l

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

@@ -1,5 +1,5 @@
 import { defineMessages as e } from "react-intl";
-const t = e({
+const a = e({
   applyButton: {
     id: "groupSharedFeatures.metadataView.filterRow.applyButton",
     defaultMessage: "Apply"
@@ -27,8 +27,12 @@ const t = e({
   fileTypeFilterTitle: {
     id: "groupSharedFeatures.metadataView.filterRow.fileTypeFilterTitle",
     defaultMessage: "File Type"
+  },
+  locationFilterTitle: {
+    id: "groupSharedFeatures.metadataView.filterRow.locationFilterTitle",
+    defaultMessage: "Location"
   }
 });
 export {
-  t as default
+  a as default
 };

package/dist/esm/lib/components/filter-row/predefinedFilters/predefined-filter-options-factory.js

@@ -0,0 +1,5 @@
+import "lodash/merge";
+import { p } from "../../../../../chunks/predefined-filter-options-factory.js";
+export {
+  p as predefinedFilterOptionsFactory
+};

package/dist/esm/lib/components/filter-row/predefinedFilters/use-predefined-filter.js

@@ -0,0 +1,71 @@
+import { useIntl as l } from "react-intl";
+import o from "../messages.js";
+import { p as a, P as i } from "../../../../../chunks/predefined-filter-options-factory.js";
+const p = {
+  fieldType: "string",
+  id: "keyword-filter",
+  name: "",
+  selected: !1,
+  variant: "search"
+}, f = {
+  fieldType: "multiSelect",
+  id: "mimetype-filter",
+  name: "",
+  selected: !1,
+  shouldRenderChip: !0,
+  variant: "file"
+}, c = {
+  fieldType: "enum",
+  id: "location-filter",
+  name: "",
+  selected: !1,
+  shouldRenderChip: !1,
+  variant: "file"
+}, d = ({
+  isDisabled: t
+}) => {
+  const {
+    formatMessage: e
+  } = l();
+  return t ? [] : [{
+    filters: [{
+      ...p,
+      placeholder: e(o.keywordSearchFilterPlaceholder)
+    }],
+    toggleable: !1
+  }];
+}, u = ({
+  isDisabled: t
+}) => {
+  const {
+    formatMessage: e
+  } = l();
+  return t ? [] : [{
+    filters: [{
+      ...f
+    }],
+    title: e(o.fileTypeFilterTitle),
+    toggleable: !0
+  }];
+}, F = ({
+  isDisabled: t,
+  ...e
+}) => {
+  const {
+    formatMessage: r
+  } = l();
+  return t ? [] : [{
+    filters: [{
+      ...c,
+      ...e
+    }],
+    title: r(o.locationFilterTitle),
+    toggleable: !0
+  }];
+}, g = (t = {}) => {
+  const e = a(t), r = d(e[i.KeywordSearchFilterGroup]), n = u(e[i.FileTypeFilterGroup]), s = F(e[i.LocationFilterGroup]);
+  return [...r, ...n, ...s];
+};
+export {
+  g as usePredefinedFilter
+};

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

@@ -1,30 +1,31 @@
 import { SidePanel as t, Accordion as c } from "@box/blueprint-web";
 import { useIntl as b } from "react-intl";
 import { useFormikContext as y } from "formik";
-import { useState as g } from "react";
-import x from "./filter.js";
+import g from "lodash/noop";
+import { useState as x } from "react";
+import B from "./filter.js";
 import o from "./messages.js";
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
-const O = ({
-  filterGroups: n,
+const V = ({
+  filterGroups: a,
   isOpen: u,
-  onIsOpenChange: i,
+  onIsOpenChange: i = g,
   getInitialFormValues: h
 }) => {
   const {
-    formatMessage: r
+    formatMessage: l
   } = b(), {
     handleSubmit: p,
-    resetForm: s,
-    values: F
-  } = y(), [f] = g(F), C = () => {
-    s({
+    resetForm: m,
+    values: f
+  } = y(), [F] = x(f), C = () => {
+    m({
       values: h()
     });
-  }, v = (l) => {
-    s({
-      values: f
-    }), i(l);
+  }, v = (r) => {
+    m({
+      values: F
+    }), i(r);
   }, S = () => {
     p(), i(!1);
   };
@@ -35,37 +36,37 @@ const O = ({
     children: /* @__PURE__ */ e(t.Overlay, {
       children: /* @__PURE__ */ d(t.Content, {
         children: [/* @__PURE__ */ e(t.Header, {
-          children: r(o.filtersHeader)
+          children: l(o.filtersHeader)
         }), /* @__PURE__ */ e(t.ScrollableContainer, {
           children: /* @__PURE__ */ e(c, {
-            defaultValue: n.map((l, a) => `item-${a}`),
+            defaultValue: a.map((r, n) => `item-${n}`),
             type: "multiple",
-            children: n.map((l, a) => /* @__PURE__ */ e(c.Item, {
-              ...l.toggleable ? {} : {
+            children: a.map((r, n) => /* @__PURE__ */ e(c.Item, {
+              ...r.toggleable ? {} : {
                 fixed: "true"
               },
-              title: l.title,
-              value: `item-${a}`,
-              children: l.filters.map((m) => /* @__PURE__ */ e(x, {
-                ...m
-              }, m.id))
-            }, `accordion-item-${l.title || "unnamed"}`))
+              title: r.title,
+              value: `item-${n}`,
+              children: r.filters.map((s) => /* @__PURE__ */ e(B, {
+                ...s
+              }, s.id))
+            }, `accordion-item-${r.title || "unnamed"}`))
           })
         }), /* @__PURE__ */ d(t.Footer, {
           children: [/* @__PURE__ */ e(t.Footer.SecondaryButton, {
             onClick: C,
-            children: r(o.clearAllButton)
+            children: l(o.clearAllButton)
           }), /* @__PURE__ */ e(t.Footer.PrimaryButton, {
             onClick: S,
-            children: r(o.showResultsButton)
+            children: l(o.showResultsButton)
           })]
         }), /* @__PURE__ */ e(t.Close, {
-          "aria-label": r(o.closeAriaLabel)
+          "aria-label": l(o.closeAriaLabel)
         })]
       })
     })
   });
 };
 export {
-  O as default
+  V as default
 };

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

@@ -1,8 +1,9 @@
 import { MetadataStringField as r } from "@box/metadata-filter";
 import { MetadataFileField as d } from "../metadata-value/metadata-file-field.js";
-import { MetadataSearchField as f } from "../metadata-value/metadata-search-field.js";
+import { MetadataLocationField as c } from "../metadata-value/metadata-location-field.js";
+import { MetadataSearchField as u } from "../metadata-value/metadata-search-field.js";
 import { jsx as t } from "react/jsx-runtime";
-const c = ({
+const m = ({
   id: e,
   name: a,
   placeholder: l,
@@ -10,7 +11,7 @@ const c = ({
 }) => {
   switch (i) {
     case "search":
-      return /* @__PURE__ */ t(f, {
+      return /* @__PURE__ */ t(u, {
         id: e,
         name: a,
         placeholder: l
@@ -19,10 +20,10 @@ const c = ({
     default:
       return /* @__PURE__ */ t(r, {
         fieldNamePrefix: `metadata.fields.${e}`,
-        label: a
+        label: a || ""
       });
   }
-}, m = ({
+}, n = ({
   id: e,
   name: a,
   variant: l
@@ -36,28 +37,53 @@ const c = ({
     default:
       return /* @__PURE__ */ t(r, {
         fieldNamePrefix: `metadata.fields.${e}`,
-        label: a
+        label: a || ""
       });
   }
-}, F = ({
+}, s = ({
+  id: e,
+  name: a,
+  variant: l,
+  renderer: i,
+  triggerCallback: f
+}) => {
+  switch (l) {
+    case "file":
+      return /* @__PURE__ */ t(c, {
+        id: e,
+        renderer: i,
+        triggerSetValueCallback: f
+      });
+    case "default":
+    default:
+      return /* @__PURE__ */ t(r, {
+        fieldNamePrefix: `metadata.fields.${e}`,
+        label: a || ""
+      });
+  }
+}, b = ({
   ...e
 }) => {
   switch (e.fieldType) {
     case "string":
-      return /* @__PURE__ */ t(c, {
+      return /* @__PURE__ */ t(m, {
         ...e
       });
     case "multiSelect":
-      return /* @__PURE__ */ t(m, {
+      return /* @__PURE__ */ t(n, {
+        ...e
+      });
+    case "enum":
+      return /* @__PURE__ */ t(s, {
         ...e
       });
     default:
       return /* @__PURE__ */ t(r, {
         fieldNamePrefix: `metadata.fields.${e.id}`,
-        label: e.name
+        label: e.name || ""
       });
   }
 };
 export {
-  F as default
+  b as default
 };

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

@@ -1,14 +1,14 @@
-import { Text as D, ListCheckbox as _, TableHeader as v, Column as M } from "@box/blueprint-web";
-import { useRef as E } from "react";
-import { useIntl as S } from "react-intl";
-import { useInfiniteScrollTableItems as k } from "./hooks/useInfiniteScrollTableItems.js";
+import { useRef as v } from "react";
+import { useIntl as M } from "react-intl";
+import { Text as E, ListCheckbox as S, TableHeader as k, Column as B } from "@box/blueprint-web";
+import { useInfiniteScrollTableItems as O } from "./hooks/useInfiniteScrollTableItems.js";
 import T from "./table-renderer.js";
-import { I as B } from "../../../../chunks/types.js";
-import { THUMBNAIL_WIDTHS as O } from "../constants.js";
+import { I as P } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as U } from "../constants.js";
 import { s } from "../../../../chunks/table-row.js";
-import P from "./messages.js";
+import j from "./messages.js";
 import { jsx as e } from "react/jsx-runtime";
-const U = 40, K = ({
+const F = 40, Q = ({
   columns: o,
   isLoading: l = !1,
   iconColumnVariant: n,
@@ -17,28 +17,29 @@ const U = 40, K = ({
   itemActionMenuProps: I,
   isInfiniteScrollEnabled: R = !1,
   hasNextPage: x = !1,
-  onGetNextPage: C,
-  placeholderRowsCount: W,
+  onInlineEditChange: C,
+  onGetNextPage: W,
+  placeholderRowsCount: g,
   zoomLevel: r,
-  ...g
+  ...w
 }) => {
   var u;
   const {
     formatMessage: c
-  } = S(), f = E(null), {
+  } = M(), f = v(null), {
     virtualItemsToDisplay: p,
-    getTableHeight: w
-  } = k({
+    getTableHeight: y
+  } = O({
     items: m,
     hasNextPage: x,
     isLoading: l,
     parentRef: f,
-    onGetNextPage: C,
-    placeholderRowsCount: W
-  }), a = [], y = 0;
-  if (n === B.COLUMN) {
-    r = r || y;
-    const t = parseInt(O[r], 10) + 24;
+    onGetNextPage: W,
+    placeholderRowsCount: g
+  }), a = [], A = 0;
+  if (n === P.COLUMN) {
+    r = r || A;
+    const t = parseInt(U[r], 10) + 24;
     a.push({
       id: "item-type-icon",
       isRowHeader: !1,
@@ -47,31 +48,31 @@ const U = 40, K = ({
       maxWidth: t
     });
   }
-  const A = o.map((t) => {
+  const N = o.map((t) => {
     const {
       id: H,
       headerRenderer: b,
       textValue: i,
-      ...N
+      ..._
     } = t;
     return {
-      children: b ? b(i, t) : /* @__PURE__ */ e(D, {
+      children: b ? b(i, t) : /* @__PURE__ */ e(E, {
         as: "span",
         children: i
       }),
       isRowHeader: H === "name",
       id: H,
       textValue: i,
-      ...N
+      ..._
     };
   });
-  a.push(...A), d && a.push({
+  a.push(...N), d && a.push({
     id: "actions",
     className: s.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
       className: s.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(_, {
-        "aria-label": c(P.selectAll),
+      children: /* @__PURE__ */ e(S, {
+        "aria-label": c(j.selectAll),
         className: s.selectAllCheckbox,
         isDisabled: l
       })
@@ -80,22 +81,23 @@ const U = 40, K = ({
     hideHeader: !1,
     allowsSorting: !1
   });
-  const h = {
-    tableHeader: /* @__PURE__ */ e(v, {
-      columns: a,
-      children: (t) => /* @__PURE__ */ e(M, {
-        ...t
-      })
-    }),
+  const D = /* @__PURE__ */ e(k, {
+    columns: a,
+    children: (t) => /* @__PURE__ */ e(B, {
+      ...t
+    })
+  }), h = {
+    columnCount: a.length,
     columns: o,
+    formatMessage: c,
     iconColumnVariant: n,
+    isLoading: l,
     isSelectAllEnabled: d,
     itemActionMenuProps: I,
     items: m,
-    isLoading: l,
-    formatMessage: c,
-    tableProps: g,
-    columnCount: a.length,
+    onInlineEditChange: C,
+    tableHeader: D,
+    tableProps: w,
     zoomLevel: r
   };
   return R ? /* @__PURE__ */ e("div", {
@@ -105,7 +107,7 @@ const U = 40, K = ({
       style: {
         position: "relative",
         width: "100%",
-        height: w() + U
+        height: y() + F
       },
       children: /* @__PURE__ */ e(T, {
         ...h,
@@ -125,5 +127,5 @@ const U = 40, K = ({
   });
 };
 export {
-  K as default
+  Q as default
 };

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

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

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

@@ -0,0 +1,37 @@
+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 = {
+  inlineEditingCell: E
+}, I = ({
+  column: n,
+  item: d,
+  onInlineEditChange: r
+}) => {
+  const s = `${n.id}-${d.id}`, e = h(d, n.id) || "--", o = (i, f) => {
+    r(d, 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,
+          variant: "secondary",
+          children: e
+        })
+      }), /* @__PURE__ */ t(l.Content, {
+        align: "start",
+        children: n.inlineEditingOptions && n.inlineEditingOptions.map((i) => /* @__PURE__ */ t(l.CheckboxItem, {
+          checked: e === i || (e == null ? void 0 : e.includes(i)),
+          onSelect: () => o(i, n.id),
+          children: i
+        }, i))
+      })]
+    })
+  }, s);
+};
+export {
+  I as default
+};