@box/metadata-view 0.59.1 → 0.60.0

package/dist/chunks/index.js

@@ -1,96 +1,100 @@
-import { Row as L, Cell as n, Text as s, ActionCell as q } from "@box/blueprint-web";
-import N from "lodash/get";
-import { ItemTypeIcon as p } from "@box/item-icon";
-import E from "clsx";
-import { I as a } from "./types.js";
-import { THUMBNAIL_LIST_VIEW_HEIGHTS as y } from "../esm/lib/components/constants.js";
+import { Row as L, Cell as n, Text as r, ActionCell as E } from "@box/blueprint-web";
+import I from "lodash/get";
+import { ItemTypeIcon as C } from "@box/item-icon";
+import y from "clsx";
+import { I as o } from "./types.js";
+import { THUMBNAIL_LIST_VIEW_HEIGHTS as R } from "../esm/lib/components/constants.js";
 import { jsxs as b, jsx as e } from "react/jsx-runtime";
-import { ItemActionMenu as R } from "../esm/lib/components/item-action-menu/item-action-menu.js";
-import '../styles/index.css';const g = "_tableHeaderActionsWrapper_169qr_1", w = "_tableHeaderActions_169qr_1", k = "_tableRow_169qr_33", U = "_selectAllCheckbox_169qr_42", B = "_tableNameCell_169qr_47", W = "_tableNameCellSubtitle_169qr_53", j = "_tableNameCellIconInline_169qr_58", F = "_infiniteScrollTableContainerFullHeight_169qr_62", M = "_iconCell_169qr_68", i = {
-  tableHeaderActionsWrapper: g,
-  tableHeaderActions: w,
-  tableRow: k,
-  selectAllCheckbox: U,
-  tableNameCell: B,
-  tableNameCellSubtitle: W,
-  tableNameCellIconInline: j,
-  infiniteScrollTableContainerFullHeight: F,
-  iconCell: M
-}, Q = ({
+import { ItemActionMenu as g } from "../esm/lib/components/item-action-menu/item-action-menu.js";
+import '../styles/index.css';const w = "_tableHeaderActionsWrapper_1a999_1", k = "_tableHeaderActions_1a999_1", U = "_tableRow_1a999_33", B = "_selectAllCheckbox_1a999_42", W = "_tableNameCell_1a999_47", j = "_tableNameCellTitle_1a999_53", F = "_hasSubtitle_1a999_57", M = "_tableNameCellText_1a999_62", $ = "_tableNameCellIconInline_1a999_67", v = "_infiniteScrollTableContainerFullHeight_1a999_71", O = "_iconCell_1a999_77", t = {
+  tableHeaderActionsWrapper: w,
+  tableHeaderActions: k,
+  tableRow: U,
+  selectAllCheckbox: B,
+  tableNameCell: W,
+  tableNameCellTitle: j,
+  hasSubtitle: F,
+  tableNameCellText: M,
+  tableNameCellIconInline: $,
+  infiniteScrollTableContainerFullHeight: v,
+  iconCell: O
+}, Y = ({
   item: l,
   columns: h,
-  iconColumnVariant: t,
-  isSelectAllEnabled: C,
-  itemActionMenuProps: d,
-  areSelectionCheckboxesDisabled: u,
-  zoomLevel: T = 0
+  iconColumnVariant: a,
+  isSelectAllEnabled: T,
+  itemActionMenuProps: _,
+  areSelectionCheckboxesDisabled: p,
+  zoomLevel: u = 0
 }) => /* @__PURE__ */ b(L, {
-  className: i.tableRow,
+  className: t.tableRow,
   id: l.id,
-  children: [t === a.COLUMN ? /* @__PURE__ */ e(n, {
+  children: [a === o.COLUMN ? /* @__PURE__ */ e(n, {
     style: {
-      height: y[T]
+      height: R[u]
     },
-    children: /* @__PURE__ */ e(p, {
-      className: i.iconCell,
+    children: /* @__PURE__ */ e(C, {
+      className: t.iconCell,
       item: l
     })
-  }, `item-type-icon-${l.id}`) : null, h.map((r) => {
+  }, `item-type-icon-${l.id}`) : null, h.map((c) => {
     const {
-      cellRenderer: _,
-      id: o,
-      isItemMetadata: f,
-      subtitle: S,
-      textValue: H,
-      type: x
-    } = r, c = `${H}-${l.id}`, A = f ? o.split(".")[1] : o, I = N(l, A);
-    if (o === "name" && (t === a.INLINE || t === a.INLINE_SUBTITLE))
+      cellRenderer: d,
+      id: s,
+      isItemMetadata: x,
+      subtitle: f,
+      textValue: S,
+      type: H
+    } = c, i = `${S}-${l.id}`, A = x ? s.split(".")[1] : s, m = I(l, A);
+    if (s === "name" && (a === o.INLINE || a === o.INLINE_SUBTITLE))
       return /* @__PURE__ */ e(n, {
         children: /* @__PURE__ */ b("div", {
-          className: i.tableNameCell,
-          children: [/* @__PURE__ */ e(p, {
+          className: t.tableNameCell,
+          children: [/* @__PURE__ */ e(C, {
             item: l
           }), /* @__PURE__ */ b("div", {
-            className: E({
-              [i.tableNameCellSubtitle]: t === a.INLINE_SUBTITLE
+            className: y(t.tableNameCellTitle, {
+              [t.hasSubtitle]: a === o.INLINE_SUBTITLE
             }),
-            children: [/* @__PURE__ */ e(s, {
+            children: [/* @__PURE__ */ e(r, {
               as: "span",
-              children: I
-            }), t === a.INLINE_SUBTITLE ? /* @__PURE__ */ e(s, {
+              className: t.tableNameCellText,
+              children: m
+            }), a === o.INLINE_SUBTITLE ? /* @__PURE__ */ e(r, {
               as: "span",
+              className: t.tableNameCellText,
               color: "textOnLightSecondary",
-              children: S
+              children: f
             }) : null]
           })]
         })
-      }, c);
-    if (_)
+      }, i);
+    if (d)
       return /* @__PURE__ */ e(n, {
-        children: _(l, r)
-      }, c);
-    if (x === "multiSelect") {
-      const m = N(l, o);
+        children: d(l, c)
+      }, i);
+    if (H === "multiSelect") {
+      const N = I(l, s);
       return /* @__PURE__ */ e(n, {
-        children: m ? m.join(" ") : ""
-      }, c);
+        children: N ? N.join(" ") : ""
+      }, i);
     }
     return /* @__PURE__ */ e(n, {
-      children: /* @__PURE__ */ e(s, {
+      children: /* @__PURE__ */ e(r, {
         as: "span",
-        children: I
+        children: m
       })
-    }, c);
-  }), C && /* @__PURE__ */ e(q, {
-    isCheckboxDisabled: u,
-    children: (r) => d ? /* @__PURE__ */ e(R, {
-      ...d,
+    }, i);
+  }), T && /* @__PURE__ */ e(E, {
+    isCheckboxDisabled: p,
+    children: (c) => _ ? /* @__PURE__ */ e(g, {
+      ..._,
       item: l,
-      onOpenChange: r
+      onOpenChange: c
     }) : null
   })]
 }, l.id);
 export {
-  Q as T,
-  i as s
+  Y as T,
+  t as s
 };

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

@@ -1,11 +1,12 @@
-import { MetadataStringField as u, MetadataMultiSelectField as f, MetadataEnumField as s, MetadataFloatField as m, MetadataDateField as F } from "@box/metadata-filter";
-import { useIntl as n } from "react-intl";
-import { MetadataFileField as M } from "../metadata-value/metadata-file-field.js";
-import { MetadataLocationField as x } from "../metadata-value/metadata-location-field.js";
-import { MetadataRadioField as b } from "../metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as S } from "../metadata-value/metadata-search-field.js";
+import { MetadataStringField as f, MetadataMultiSelectField as s, MetadataEnumField as m, MetadataFloatField as F, MetadataDateField as M } from "@box/metadata-filter";
+import { useIntl as d } from "react-intl";
+import { MetadataFileField as x } from "../metadata-value/metadata-file-field.js";
+import { MetadataLocationField as b } from "../metadata-value/metadata-location-field.js";
+import { MetadataRadioField as h } from "../metadata-value/metadata-radio-field.js";
+import { MetadataCheckboxField as S } from "../metadata-value/metadata-checkbox-field.js";
+import { MetadataSearchField as g } from "../metadata-value/metadata-search-field.js";
 import { jsx as t } from "react/jsx-runtime";
-const i = (e) => `metadata.fields.${e}`, g = ({
+const i = (e) => `metadata.fields.${e}`, P = ({
   id: e,
   name: a,
   placeholder: l,
@@ -13,19 +14,20 @@ const i = (e) => `metadata.fields.${e}`, g = ({
 }) => {
   switch (r) {
     case "search":
-      return /* @__PURE__ */ t(S, {
+      return /* @__PURE__ */ t(g, {
         id: e,
         name: a,
         placeholder: l
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(u, {
+      return /* @__PURE__ */ t(f, {
         fieldNamePrefix: i(e),
-        label: a || ""
+        label: a || "",
+        placeholder: l
       });
   }
-}, h = ({
+}, N = ({
   id: e,
   name: a,
   variant: l,
@@ -33,56 +35,63 @@ const i = (e) => `metadata.fields.${e}`, g = ({
 }) => {
   switch (l) {
     case "file":
-      return /* @__PURE__ */ t(M, {
+      return /* @__PURE__ */ t(x, {
         id: e
       });
+    case "checkbox":
+      return /* @__PURE__ */ t(S, {
+        id: e,
+        name: a
+      });
     case "default":
     default:
-      return /* @__PURE__ */ t(f, {
+      return /* @__PURE__ */ t(s, {
         fieldNamePrefix: i(e),
         label: a || "",
         portalElement: r
       });
   }
-}, P = ({
+}, w = ({
   id: e,
   name: a,
   parentRef: l,
   variant: r,
   renderer: c,
-  triggerCallback: d
+  triggerCallback: o,
+  placeholder: n
 }) => {
   const {
-    locale: o
-  } = n();
+    locale: u
+  } = d();
   switch (r) {
     case "file":
-      return /* @__PURE__ */ t(x, {
+      return /* @__PURE__ */ t(b, {
         id: e,
         renderer: c,
-        triggerSetValueCallback: d
+        triggerSetValueCallback: o
       });
     case "radio":
-      return /* @__PURE__ */ t(b, {
+      return /* @__PURE__ */ t(h, {
         id: e,
         name: a
       });
     case "default":
     default:
-      return /* @__PURE__ */ t(s, {
+      return /* @__PURE__ */ t(m, {
         fieldNamePrefix: i(e),
         label: a || "",
-        locale: o,
+        locale: u,
+        placeholder: n,
         portalElement: l
       });
   }
-}, N = ({
+}, E = ({
   id: e,
   name: a
-}) => /* @__PURE__ */ t(m, {
+}) => /* @__PURE__ */ t(F, {
   fieldNamePrefix: i(e),
   label: a || ""
-}), w = ({
+}), k = ({
   customLabels: e,
   canUseRelativeDates: a,
   customDateFilterOptions: l,
@@ -90,39 +99,39 @@ const i = (e) => `metadata.fields.${e}`, g = ({
   name: c
 }) => {
   const {
-    locale: d
-  } = n();
-  return /* @__PURE__ */ t(F, {
+    locale: o
+  } = d();
+  return /* @__PURE__ */ t(M, {
     canUseRelativeDates: a,
     customDateFilterOptions: l,
     customFieldLabels: e,
     direction: "vertical",
     fieldNamePrefix: i(r),
     label: c || "",
-    locale: d
+    locale: o
   });
-}, y = ({
+}, R = ({
   ...e
 }) => {
   switch (e.fieldType) {
     case "string":
-      return /* @__PURE__ */ t(g, {
+      return /* @__PURE__ */ t(P, {
         ...e
       });
     case "float":
-      return /* @__PURE__ */ t(N, {
+      return /* @__PURE__ */ t(E, {
         ...e
       });
     case "date":
-      return /* @__PURE__ */ t(w, {
+      return /* @__PURE__ */ t(k, {
         ...e
       });
     case "multiSelect":
-      return /* @__PURE__ */ t(h, {
+      return /* @__PURE__ */ t(N, {
         ...e
       });
     case "enum":
-      return /* @__PURE__ */ t(P, {
+      return /* @__PURE__ */ t(w, {
         ...e
       });
     default:
@@ -130,5 +139,5 @@ const i = (e) => `metadata.fields.${e}`, g = ({
   }
 };
 export {
-  y as Filter
+  R as Filter
 };

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

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

package/dist/esm/lib/components/metadata-value/metadata-checkbox-field.js

@@ -0,0 +1,35 @@
+import { useFormikContext as C } from "formik";
+import { Checkbox as c } from "@box/blueprint-web";
+import { jsx as m } from "react/jsx-runtime";
+const b = ({
+  id: a,
+  name: i
+}) => {
+  var l, s, r;
+  const {
+    values: n,
+    setFieldValue: u
+  } = C(), h = ((l = n.metadata.fields[a]) == null ? void 0 : l.options) || [], d = ((r = (s = n.metadata.fields[a]) == null ? void 0 : s.value) == null ? void 0 : r.enum) || [], f = (e, o) => {
+    const t = new Set(d);
+    o ? t.add(e) : t.delete(e), u(`metadata.fields.${a}.value.enum`, Array.from(t));
+  };
+  return /* @__PURE__ */ m(c.Legend, {
+    header: i,
+    children: h.map(({
+      key: e
+    }) => {
+      const o = d.includes(e);
+      return /* @__PURE__ */ m(c.Item, {
+        checked: o,
+        label: e,
+        onCheckedChange: (t) => {
+          f(e, t === !0);
+        },
+        value: e
+      }, e);
+    })
+  });
+};
+export {
+  b as MetadataCheckboxField
+};

package/dist/styles/index.css

@@ -1 +1 @@
-._tableHeaderActionsWrapper_169qr_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_169qr_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_169qr_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_169qr_33:after{height:100%!important}._tableRow_169qr_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_169qr_42 svg{transform:none!important}._tableNameCell_169qr_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellSubtitle_169qr_53{display:flex;flex-direction:column}._tableNameCellIconInline_169qr_58{flex-shrink:0}._infiniteScrollTableContainerFullHeight_169qr_62{width:100%;height:100%;overflow:auto}._iconCell_169qr_68{width:100%!important;height:100%!important}
+._tableHeaderActionsWrapper_1a999_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_1a999_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_1a999_1{position:sticky;right:0;width:var(--size-6);padding:0}._tableRow_1a999_33:after{height:100%!important}._tableRow_1a999_33[aria-selected=true]:after{height:100%!important}._selectAllCheckbox_1a999_42 svg{transform:none!important}._tableNameCell_1a999_47{display:flex;gap:var(--space-3);align-items:center}._tableNameCellTitle_1a999_53{overflow:hidden;text-overflow:ellipsis}._tableNameCellTitle_1a999_53._hasSubtitle_1a999_57{display:flex;flex-direction:column}._tableNameCellText_1a999_62{overflow:hidden;text-overflow:ellipsis}._tableNameCellIconInline_1a999_67{flex-shrink:0}._infiniteScrollTableContainerFullHeight_1a999_71{width:100%;height:100%;overflow:auto}._iconCell_1a999_77{width:100%!important;height:100%!important}

package/dist/types/lib/components/metadata-value/metadata-checkbox-field.d.ts

@@ -0,0 +1,5 @@
+export interface MetadataCheckboxFieldProps {
+    id: string;
+    name: string;
+}
+export declare const MetadataCheckboxField: ({ id, name }: MetadataCheckboxFieldProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { ColumnProps } from '@box/blueprint-web';
 import { Item } from '@box/types';
 import { ItemActionMenuProps } from './components/item-action-menu';
 export type MetadataFieldType = 'date' | 'enum' | 'float' | 'multiSelect' | 'string';
-export type FilterVariant = 'default' | 'search' | 'file' | 'radio' | 'relative';
+export type FilterVariant = 'default' | 'search' | 'file' | 'radio' | 'relative' | 'checkbox';
 export interface Column extends Partial<ColumnProps> {
     cellRenderer?: (item: Item, column: Column) => React.ReactNode | undefined;
     headerRenderer?: (name: string, column: Column) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.59.1",
+    "version": "0.60.0",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^12.76.2",
@@ -23,7 +23,7 @@
         "@box/box-item-type-selector": "^0.76.4",
         "@box/eslint-plugin-blueprint": "1.0.5",
         "@box/item-icon": "^0.30.4",
-        "@box/metadata-filter": "^1.35.2",
+        "@box/metadata-filter": "^1.36.0",
         "@box/storybook-utils": "0.14.7",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",