@box/metadata-view 0.48.4 → 0.48.6

package/dist/esm/index.js

@@ -1,54 +1,56 @@
-import { MetadataView as r } from "./lib/metadata-view.js";
+import { MetadataView as o } from "./lib/metadata-view.js";
 import { I as a, V as i } from "../chunks/types.js";
 import { ActionBar as m } from "./lib/components/action-bar/action-bar.js";
 import { FilterRow as x } from "./lib/components/filter-row/filter-row.js";
 import { F as n } from "../chunks/form-filter-chip.js";
 import { MetadataFilterChip as F } from "./lib/components/filter-row/metadata-filter-chip.js";
 import { SelectFilterChip as s } from "./lib/components/filter-row/select-filter-chip.js";
-import { Filter as c } from "./lib/components/filter-sidepanel/filter.js";
-import { FilterSidePanel as g } from "./lib/components/filter-sidepanel/filter-side-panel.js";
-import { ItemActionMenu as P } from "./lib/components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as I } from "./lib/components/metadata-grid/metadata-grid.js";
-import { MetadataTable as B } from "./lib/components/metadata-table/metadata-table.js";
-import { InlineEditingCell as b } from "./lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
-import { TableRenderer as A } from "./lib/components/metadata-table/table-renderer.js";
-import { MetadataFileChip as k } from "./lib/components/metadata-value/metadata-file-chip.js";
-import { MetadataFileField as E } from "./lib/components/metadata-value/metadata-file-field.js";
-import { MetadataLocationField as L } from "./lib/components/metadata-value/metadata-location-field.js";
-import { MetadataRadioField as j } from "./lib/components/metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as v } from "./lib/components/metadata-value/metadata-search-field.js";
-import { Pagination as z } from "./lib/components/pagination/pagination.js";
-import { MarkerBasedPagination as J } from "./lib/components/pagination/marker-based-pagination.js";
-import { OffsetBasedPagination as N } from "./lib/components/pagination/offset-based-pagination.js";
-import { PaginationControls as U } from "./lib/components/pagination/pagination-controls.js";
-import { SortDropdown as X } from "./lib/components/sort-dropdown/sort-dropdown.js";
-import { Case as Z, SwitchCase as _ } from "./lib/components/switch-case/switch-case.js";
+import { PredefinedFilterName as c } from "./lib/components/filter-row/predefinedFilters/index.js";
+import { Filter as P } from "./lib/components/filter-sidepanel/filter.js";
+import { FilterSidePanel as w } from "./lib/components/filter-sidepanel/filter-side-panel.js";
+import { ItemActionMenu as I } from "./lib/components/item-action-menu/item-action-menu.js";
+import { MetadataGrid as B } from "./lib/components/metadata-grid/metadata-grid.js";
+import { MetadataTable as b } from "./lib/components/metadata-table/metadata-table.js";
+import { InlineEditingCell as A } from "./lib/components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
+import { TableRenderer as k } from "./lib/components/metadata-table/table-renderer.js";
+import { MetadataFileChip as E } from "./lib/components/metadata-value/metadata-file-chip.js";
+import { MetadataFileField as L } from "./lib/components/metadata-value/metadata-file-field.js";
+import { MetadataLocationField as O } from "./lib/components/metadata-value/metadata-location-field.js";
+import { MetadataRadioField as q } from "./lib/components/metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as y } from "./lib/components/metadata-value/metadata-search-field.js";
+import { Pagination as H } from "./lib/components/pagination/pagination.js";
+import { MarkerBasedPagination as K } from "./lib/components/pagination/marker-based-pagination.js";
+import { OffsetBasedPagination as U } from "./lib/components/pagination/offset-based-pagination.js";
+import { PaginationControls as X } from "./lib/components/pagination/pagination-controls.js";
+import { SortDropdown as Z } from "./lib/components/sort-dropdown/sort-dropdown.js";
+import { Case as $, SwitchCase as ee } from "./lib/components/switch-case/switch-case.js";
 export {
   m as ActionBar,
-  Z as Case,
-  c as Filter,
+  $ as Case,
+  P as Filter,
   x as FilterRow,
-  g as FilterSidePanel,
+  w as FilterSidePanel,
   n as FormFilterChip,
   a as IconColumnVariant,
-  b as InlineEditingCell,
-  P as ItemActionMenu,
-  J as MarkerBasedPagination,
-  k as MetadataFileChip,
-  E as MetadataFileField,
+  A as InlineEditingCell,
+  I as ItemActionMenu,
+  K as MarkerBasedPagination,
+  E as MetadataFileChip,
+  L as MetadataFileField,
   F as MetadataFilterChip,
-  I as MetadataGrid,
-  L as MetadataLocationField,
-  j as MetadataRadioField,
-  v as MetadataSearchField,
-  B as MetadataTable,
-  r as MetadataView,
-  N as OffsetBasedPagination,
-  z as Pagination,
-  U as PaginationControls,
+  B as MetadataGrid,
+  O as MetadataLocationField,
+  q as MetadataRadioField,
+  y as MetadataSearchField,
+  b as MetadataTable,
+  o as MetadataView,
+  U as OffsetBasedPagination,
+  H as Pagination,
+  X as PaginationControls,
+  c as PredefinedFilterName,
   s as SelectFilterChip,
-  X as SortDropdown,
-  _ as SwitchCase,
-  A as TableRenderer,
+  Z as SortDropdown,
+  ee as SwitchCase,
+  k as TableRenderer,
   i as ViewMode
 };

package/dist/esm/lib/components/filter-row/all-filters-chip.js

@@ -1,39 +1,41 @@
 import { FilterChip as e } from "@box/blueprint-web";
-import { Filter as c } from "@box/blueprint-web-assets/icons/Line";
-import { useFormikContext as f } from "formik";
-import { useState as d, useMemo as u } from "react";
-import { useIntl as h } from "react-intl";
-import { getInitialFieldValues as F } from "./initial-field-values.js";
-import { isFilterSelected as g } from "./is-filter-selected.js";
-import S from "./messages.js";
-import { jsxs as a, Fragment as C, jsx as t } from "react/jsx-runtime";
-import { FilterSidePanel as I } from "../filter-sidepanel/filter-side-panel.js";
-const L = ({
+import { Filter as f } from "@box/blueprint-web-assets/icons/Line";
+import { useFormikContext as d } from "formik";
+import { useState as u, useMemo as h } from "react";
+import { useIntl as F } from "react-intl";
+import { getInitialFieldValues as g } from "./initial-field-values.js";
+import { isFilterSelected as S } from "./is-filter-selected.js";
+import C from "./messages.js";
+import { jsxs as a, Fragment as I, jsx as t } from "react/jsx-runtime";
+import { FilterSidePanel as O } from "../filter-sidepanel/filter-side-panel.js";
+const P = ({
+  containerRef: m,
   filterGroups: l
 }) => {
   const {
-    formatMessage: m
-  } = h(), {
+    formatMessage: p
+  } = F(), {
     values: r
-  } = f(), [o, n] = d(!1), p = () => n(!0), s = u(() => Object.values(r.metadata.fields).filter((i) => g(i.value)).length, [r.metadata.fields]);
-  return /* @__PURE__ */ a(C, {
+  } = d(), [o, n] = u(!1), c = () => n(!0), s = h(() => Object.values(r.metadata.fields).filter((i) => S(i.value)).length, [r.metadata.fields]);
+  return /* @__PURE__ */ a(I, {
     children: [
       // We need to initialize the sidepanel state at the moment it is opened
-      o && /* @__PURE__ */ t(I, {
+      o && /* @__PURE__ */ t(O, {
+        containerRef: m,
         filterGroups: l,
-        getInitialFormValues: () => F(l.flatMap(({
+        getInitialFormValues: () => g(l.flatMap(({
           filters: i
         }) => i)),
         isOpen: o,
         onIsOpenChange: n
       }),
       /* @__PURE__ */ a(e.ChipButton, {
-        onClick: p,
+        onClick: c,
         value: "all-filters-chip-btn",
         children: [/* @__PURE__ */ t(e.Icon, {
-          icon: c
+          icon: f
         }), /* @__PURE__ */ t(e.Label, {
-          children: m(S.allFilters)
+          children: p(C.allFilters)
         }), s > 0 ? /* @__PURE__ */ t(e.Status, {
           children: s.toString()
         }) : null]
@@ -42,5 +44,5 @@ const L = ({
   });
 };
 export {
-  L as default
+  P as default
 };

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

@@ -1,49 +1,52 @@
-import { FilterChip as d } from "@box/blueprint-web";
-import { Formik as c, Form as h } from "formik";
-import { useRef as F } from "react";
-import C from "./all-filters-chip.js";
-import { getInitialFieldValues as R } from "./initial-field-values.js";
-import { MetadataFilterChip as G } from "./metadata-filter-chip.js";
-import { usePredefinedFilter as x } from "./predefinedFilters/use-predefined-filter.js";
-import { s as V } from "../../../../chunks/form-filter-chip.js";
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
+import { FilterChip as c } from "@box/blueprint-web";
+import { Formik as h, Form as F } from "formik";
+import { useRef as C } from "react";
+import R from "./all-filters-chip.js";
+import { getInitialFieldValues as G } from "./initial-field-values.js";
+import { MetadataFilterChip as x } from "./metadata-filter-chip.js";
+import { usePredefinedFilter as V } from "./predefinedFilters/use-predefined-filter.js";
+import { s as b } from "../../../../chunks/form-filter-chip.js";
+import { jsx as e, jsxs as j } from "react/jsx-runtime";
 import "./select-filter-chip.js";
-const N = ({
+import "./predefinedFilters/index.js";
+const S = ({
   predefinedFilterOptions: m,
-  filterGroups: s = [],
+  containerRef: s,
+  filterGroups: p = [],
   initialFilterValues: a,
-  isAllFiltersDisabled: p,
+  isAllFiltersDisabled: n,
   onFilterSubmit: r
 }) => {
-  const n = x(m), f = ({
+  const f = V(m), u = ({
     metadata: {
       fields: i
     }
   }) => {
     r && r(i);
-  }, t = [...n, ...s], l = t.flatMap(({
+  }, t = [...f, ...p], o = t.flatMap(({
     filters: i
-  }) => i), u = R(l, a), o = F(null);
-  return /* @__PURE__ */ e(c, {
+  }) => i), d = G(o, a), l = C(null);
+  return /* @__PURE__ */ e(h, {
     enableReinitialize: !0,
-    initialValues: u,
-    onSubmit: f,
-    children: /* @__PURE__ */ e(h, {
-      ref: o,
-      children: /* @__PURE__ */ b(d.Group, {
-        className: V.filterChipGroup,
+    initialValues: d,
+    onSubmit: u,
+    children: /* @__PURE__ */ e(F, {
+      ref: l,
+      children: /* @__PURE__ */ j(c.Group, {
+        className: b.filterChipGroup,
         name: "metadata-view-filters",
         type: "multiple",
-        children: [p ? null : /* @__PURE__ */ e(C, {
+        children: [n ? null : /* @__PURE__ */ e(R, {
+          containerRef: s,
           filterGroups: t
-        }), l.filter((i) => i.shouldRenderChip).map((i) => /* @__PURE__ */ e(G, {
+        }), o.filter((i) => i.shouldRenderChip).map((i) => /* @__PURE__ */ e(x, {
           filterOption: i,
-          formRef: o
+          formRef: l
         }, i.id))]
       })
     })
   });
 };
 export {
-  N as FilterRow
+  S as FilterRow
 };

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

@@ -1,10 +1,12 @@
 import { FilterRow as t } from "./filter-row.js";
 import { F as i } from "../../../../chunks/form-filter-chip.js";
-import { MetadataFilterChip as F } from "./metadata-filter-chip.js";
-import { SelectFilterChip as m } from "./select-filter-chip.js";
+import { MetadataFilterChip as m } from "./metadata-filter-chip.js";
+import { SelectFilterChip as f } from "./select-filter-chip.js";
+import { PredefinedFilterName as a } from "./predefinedFilters/index.js";
 export {
   t as FilterRow,
   i as FormFilterChip,
-  F as MetadataFilterChip,
-  m as SelectFilterChip
+  m as MetadataFilterChip,
+  a as PredefinedFilterName,
+  f as SelectFilterChip
 };

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

@@ -0,0 +1,6 @@
+let o = /* @__PURE__ */ function(r) {
+  return r.KeywordSearchFilterGroup = "KeywordSearchFilterGroup", r.FileTypeFilterGroup = "FileTypeFilterGroup", r.LocationFilterGroup = "LocationFilterGroup", r;
+}({});
+export {
+  o as PredefinedFilterName
+};

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

@@ -1,5 +1,22 @@
-import "lodash/merge";
-import { p } from "../../../../../chunks/predefined-filter-options-factory.js";
+import o from "lodash/merge";
+import { PredefinedFilterName as e } from "./index.js";
+function a(r = {}) {
+  const i = {
+    [e.KeywordSearchFilterGroup]: {
+      isDisabled: !1
+    },
+    [e.FileTypeFilterGroup]: {
+      isDisabled: !1
+    },
+    [e.LocationFilterGroup]: {
+      isDisabled: !1,
+      triggerCallback: () => {
+        console.error("Custom callback needs to be provided");
+      }
+    }
+  };
+  return o(i, r);
+}
 export {
-  p as predefinedFilterOptionsFactory
+  a as predefinedFilterOptionsFactory
 };

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

@@ -1,6 +1,7 @@
 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";
+import { predefinedFilterOptionsFactory as a } from "./predefined-filter-options-factory.js";
+import { PredefinedFilterName as i } from "./index.js";
 const p = {
   fieldType: "string",
   id: "keyword-filter",
@@ -47,7 +48,7 @@ const p = {
     title: e(o.fileTypeFilterTitle),
     toggleable: !0
   }];
-}, F = ({
+}, m = ({
   isDisabled: t,
   ...e
 }) => {
@@ -62,10 +63,10 @@ const p = {
     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]);
+}, h = (t = {}) => {
+  const e = a(t), r = d(e[i.KeywordSearchFilterGroup]), n = u(e[i.FileTypeFilterGroup]), s = m(e[i.LocationFilterGroup]);
   return [...r, ...n, ...s];
 };
 export {
-  g as usePredefinedFilter
+  h as usePredefinedFilter
 };

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

@@ -1,74 +1,76 @@
-import { Filter as x } from "./filter.js";
+import { Filter as B } from "./filter.js";
 import { SidePanel as t, Accordion as c } from "@box/blueprint-web";
-import { useIntl as B } from "react-intl";
-import { useFormikContext as R } from "formik";
-import k from "lodash/noop";
-import { useState as d } from "react";
-import n from "./messages.js";
-import { jsx as e, jsxs as u } from "react/jsx-runtime";
-const w = ({
-  filterGroups: a,
-  isOpen: h,
-  onIsOpenChange: i = k,
-  getInitialFormValues: p
+import { useIntl as k } from "react-intl";
+import { useFormikContext as A } from "formik";
+import P from "lodash/noop";
+import { useState as u } from "react";
+import o from "./messages.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+const M = ({
+  containerRef: n,
+  filterGroups: i,
+  isOpen: p,
+  onIsOpenChange: s = P,
+  getInitialFormValues: C
 }) => {
   const {
-    formatMessage: l
-  } = B(), {
-    handleSubmit: f,
-    resetForm: s,
-    values: C
-  } = R(), [F] = d(C), [S, v] = d(null), b = () => {
-    s({
-      values: p()
+    formatMessage: r
+  } = k(), {
+    handleSubmit: F,
+    resetForm: m,
+    values: f
+  } = A(), [S] = u(f), [v, b] = u(null), y = () => {
+    m({
+      values: C()
     });
-  }, y = (r) => {
-    s({
-      values: F
-    }), i(r);
-  }, g = () => {
-    f(), i(!1);
+  }, g = (l) => {
+    m({
+      values: S
+    }), s(l);
+  }, x = () => {
+    F(), s(!1);
   };
   return /* @__PURE__ */ e(t, {
-    onOpenChange: y,
-    open: h,
+    onOpenChange: g,
+    open: p,
     variant: "overlay",
     children: /* @__PURE__ */ e(t.Overlay, {
-      children: /* @__PURE__ */ u(t.Content, {
+      container: n == null ? void 0 : n.current,
+      children: /* @__PURE__ */ h(t.Content, {
         children: [/* @__PURE__ */ e(t.Header, {
-          children: l(n.filtersHeader)
+          children: r(o.filtersHeader)
         }), /* @__PURE__ */ e(t.ScrollableContainer, {
-          ref: v,
+          ref: b,
           children: /* @__PURE__ */ e(c, {
-            defaultValue: a.map((r, o) => `item-${o}`),
+            defaultValue: i.map((l, a) => `item-${a}`),
             type: "multiple",
-            children: a.map((r, o) => /* @__PURE__ */ e(c.Item, {
-              ...r.toggleable ? {} : {
+            children: i.map((l, a) => /* @__PURE__ */ e(c.Item, {
+              ...l.toggleable ? {} : {
                 fixed: "true"
               },
-              title: r.title,
-              value: `item-${o}`,
-              children: r.filters.map((m) => /* @__PURE__ */ e(x, {
-                ...m,
-                parentRef: S
-              }, m.id))
-            }, `accordion-item-${r.title || "unnamed"}`))
+              title: l.title,
+              value: `item-${a}`,
+              children: l.filters.map((d) => /* @__PURE__ */ e(B, {
+                ...d,
+                parentRef: v
+              }, d.id))
+            }, `accordion-item-${l.title || "unnamed"}`))
           })
-        }), /* @__PURE__ */ u(t.Footer, {
+        }), /* @__PURE__ */ h(t.Footer, {
           children: [/* @__PURE__ */ e(t.Footer.SecondaryButton, {
-            onClick: b,
-            children: l(n.clearAllButton)
+            onClick: y,
+            children: r(o.clearAllButton)
           }), /* @__PURE__ */ e(t.Footer.PrimaryButton, {
-            onClick: g,
-            children: l(n.showResultsButton)
+            onClick: x,
+            children: r(o.showResultsButton)
           })]
         }), /* @__PURE__ */ e(t.Close, {
-          "aria-label": l(n.closeAriaLabel)
+          "aria-label": r(o.closeAriaLabel)
         })]
       })
     })
   });
 };
 export {
-  w as FilterSidePanel
+  M as FilterSidePanel
 };

package/dist/esm/lib/components/index.js

@@ -3,47 +3,49 @@ import { FilterRow as a } from "./filter-row/filter-row.js";
 import { F as p } from "../../../chunks/form-filter-chip.js";
 import { MetadataFilterChip as m } from "./filter-row/metadata-filter-chip.js";
 import { SelectFilterChip as d } from "./filter-row/select-filter-chip.js";
-import { Filter as n } from "./filter-sidepanel/filter.js";
-import { FilterSidePanel as M } from "./filter-sidepanel/filter-side-panel.js";
-import { ItemActionMenu as s } from "./item-action-menu/item-action-menu.js";
-import { MetadataGrid as h } from "./metadata-grid/metadata-grid.js";
-import { MetadataTable as P } from "./metadata-table/metadata-table.js";
-import { InlineEditingCell as w } from "./metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
-import { TableRenderer as R } from "./metadata-table/table-renderer.js";
-import { MetadataFileChip as A } from "./metadata-value/metadata-file-chip.js";
-import { MetadataFileField as T } from "./metadata-value/metadata-file-field.js";
-import { MetadataLocationField as u } from "./metadata-value/metadata-location-field.js";
-import { MetadataRadioField as E } from "./metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as L } from "./metadata-value/metadata-search-field.js";
-import { Pagination as j } from "./pagination/pagination.js";
-import { MarkerBasedPagination as v } from "./pagination/marker-based-pagination.js";
-import { OffsetBasedPagination as z } from "./pagination/offset-based-pagination.js";
-import { PaginationControls as J } from "./pagination/pagination-controls.js";
-import { SortDropdown as N } from "./sort-dropdown/sort-dropdown.js";
-import { Case as U, SwitchCase as V } from "./switch-case/switch-case.js";
+import { PredefinedFilterName as n } from "./filter-row/predefinedFilters/index.js";
+import { Filter as M } from "./filter-sidepanel/filter.js";
+import { FilterSidePanel as s } from "./filter-sidepanel/filter-side-panel.js";
+import { ItemActionMenu as h } from "./item-action-menu/item-action-menu.js";
+import { MetadataGrid as g } from "./metadata-grid/metadata-grid.js";
+import { MetadataTable as w } from "./metadata-table/metadata-table.js";
+import { InlineEditingCell as R } from "./metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
+import { TableRenderer as A } from "./metadata-table/table-renderer.js";
+import { MetadataFileChip as T } from "./metadata-value/metadata-file-chip.js";
+import { MetadataFileField as u } from "./metadata-value/metadata-file-field.js";
+import { MetadataLocationField as E } from "./metadata-value/metadata-location-field.js";
+import { MetadataRadioField as L } from "./metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as O } from "./metadata-value/metadata-search-field.js";
+import { Pagination as q } from "./pagination/pagination.js";
+import { MarkerBasedPagination as y } from "./pagination/marker-based-pagination.js";
+import { OffsetBasedPagination as H } from "./pagination/offset-based-pagination.js";
+import { PaginationControls as K } from "./pagination/pagination-controls.js";
+import { SortDropdown as U } from "./sort-dropdown/sort-dropdown.js";
+import { Case as W, SwitchCase as X } from "./switch-case/switch-case.js";
 export {
   o as ActionBar,
-  U as Case,
-  n as Filter,
+  W as Case,
+  M as Filter,
   a as FilterRow,
-  M as FilterSidePanel,
+  s as FilterSidePanel,
   p as FormFilterChip,
-  w as InlineEditingCell,
-  s as ItemActionMenu,
-  v as MarkerBasedPagination,
-  A as MetadataFileChip,
-  T as MetadataFileField,
+  R as InlineEditingCell,
+  h as ItemActionMenu,
+  y as MarkerBasedPagination,
+  T as MetadataFileChip,
+  u as MetadataFileField,
   m as MetadataFilterChip,
-  h as MetadataGrid,
-  u as MetadataLocationField,
-  E as MetadataRadioField,
-  L as MetadataSearchField,
-  P as MetadataTable,
-  z as OffsetBasedPagination,
-  j as Pagination,
-  J as PaginationControls,
+  g as MetadataGrid,
+  E as MetadataLocationField,
+  L as MetadataRadioField,
+  O as MetadataSearchField,
+  w as MetadataTable,
+  H as OffsetBasedPagination,
+  q as Pagination,
+  K as PaginationControls,
+  n as PredefinedFilterName,
   d as SelectFilterChip,
-  N as SortDropdown,
-  V as SwitchCase,
-  R as TableRenderer
+  U as SortDropdown,
+  X as SwitchCase,
+  A as TableRenderer
 };

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

@@ -1,46 +1,46 @@
-import { useRef as v } from "react";
-import { useIntl as E } from "react-intl";
-import { Text as S, ListCheckbox as k, TableHeader as B, Column as O } from "@box/blueprint-web";
-import { useInfiniteScrollTableItems as P } from "./hooks/useInfiniteScrollTableItems.js";
-import { TableRenderer as I } from "./table-renderer.js";
-import { I as U } from "../../../../chunks/types.js";
-import { THUMBNAIL_WIDTHS as j } from "../constants.js";
+import { useRef as E } from "react";
+import { useIntl as k } from "react-intl";
+import { Text as B, ListCheckbox as O, TableHeader as P, Column as U } from "@box/blueprint-web";
+import { useInfiniteScrollTableItems as j } from "./hooks/useInfiniteScrollTableItems.js";
+import { TableRenderer as T } from "./table-renderer.js";
+import { I as F } from "../../../../chunks/types.js";
+import { THUMBNAIL_WIDTHS as G } from "../constants.js";
 import { s } from "../../../../chunks/index.js";
-import F from "./messages.js";
+import L from "./messages.js";
 import { jsx as e } from "react/jsx-runtime";
 import "./table-body/inline-editing-cell/inline-editing-cell.js";
-const G = 40, ee = ({
+const V = 40, ae = ({
   columns: o,
   isLoading: i = !1,
   iconColumnVariant: n,
-  isSelectAllEnabled: d,
-  items: m,
-  itemActionMenuProps: T,
-  isInfiniteScrollEnabled: R = !1,
-  hasNextPage: x = !1,
-  onInlineEditChange: C,
-  onGetNextPage: W,
-  placeholderRowsCount: g,
+  isSelectAllEnabled: m,
+  items: d,
+  itemActionMenuProps: R,
+  isInfiniteScrollEnabled: x = !1,
+  hasNextPage: w = !1,
+  onInlineEditChange: g,
+  onGetNextPage: y,
+  placeholderRowsCount: C,
   zoomLevel: r,
-  ...w
+  ...W
 }) => {
   var u;
   const {
     formatMessage: c
-  } = E(), f = v(null), {
+  } = k(), f = E(null), {
     virtualItemsToDisplay: p,
-    getTableHeight: y
-  } = P({
-    items: m,
-    hasNextPage: x,
+    getTableHeight: A
+  } = j({
+    items: d,
+    hasNextPage: w,
     isLoading: i,
     parentRef: f,
-    onGetNextPage: W,
-    placeholderRowsCount: g
-  }), a = [], A = 0;
-  if (n === U.COLUMN) {
-    r = r || A;
-    const t = parseInt(j[r], 10) + 24;
+    onGetNextPage: y,
+    placeholderRowsCount: C
+  }), a = [], N = 0;
+  if (n === F.COLUMN) {
+    r = r || N;
+    const t = parseInt(G[r], 10) + 24;
     a.push({
       id: "item-type-icon",
       isRowHeader: !1,
@@ -49,32 +49,35 @@ const G = 40, ee = ({
       maxWidth: t
     });
   }
-  const N = o.map((t) => {
+  const D = o.map((t) => {
     const {
       id: H,
-      isItemMetadata: M,
+      isItemMetadata: S,
+      isRowHeader: _,
       headerRenderer: b,
       textValue: l,
-      ..._
+      type: I,
+      ...v
     } = t;
     return {
-      children: b ? b(l, t) : /* @__PURE__ */ e(S, {
+      ...v,
+      children: b ? b(l, t) : /* @__PURE__ */ e(B, {
         as: "span",
         children: l
       }),
-      isRowHeader: H === "name",
-      id: M ? "item.{id}" : H,
+      isRowHeader: H === "name" || _,
+      id: S ? "item.{id}" : H,
       textValue: l,
-      ..._
+      allowsSorting: I !== "multiSelect" && I !== "enum"
     };
   });
-  a.push(...N), d && a.push({
+  a.push(...D), m && a.push({
     id: "actions",
     className: s.tableHeaderActions,
     children: /* @__PURE__ */ e("div", {
       className: s.tableHeaderActionsWrapper,
-      children: /* @__PURE__ */ e(k, {
-        "aria-label": c(F.selectAll),
+      children: /* @__PURE__ */ e(O, {
+        "aria-label": c(L.selectAll),
         className: s.selectAllCheckbox,
         isDisabled: i
       })
@@ -83,9 +86,9 @@ const G = 40, ee = ({
     hideHeader: !1,
     allowsSorting: !1
   });
-  const D = /* @__PURE__ */ e(B, {
+  const M = /* @__PURE__ */ e(P, {
     columns: a,
-    children: (t) => /* @__PURE__ */ e(O, {
+    children: (t) => /* @__PURE__ */ e(U, {
       ...t
     })
   }), h = {
@@ -94,24 +97,24 @@ const G = 40, ee = ({
     formatMessage: c,
     iconColumnVariant: n,
     isLoading: i,
-    isSelectAllEnabled: d,
-    itemActionMenuProps: T,
-    items: m,
-    onInlineEditChange: C,
-    tableHeader: D,
-    tableProps: w,
+    isSelectAllEnabled: m,
+    itemActionMenuProps: R,
+    items: d,
+    onInlineEditChange: g,
+    tableHeader: M,
+    tableProps: W,
     zoomLevel: r
   };
-  return R ? /* @__PURE__ */ e("div", {
+  return x ? /* @__PURE__ */ e("div", {
     ref: f,
     className: s.infiniteScrollTableContainerFullHeight,
     children: /* @__PURE__ */ e("div", {
       style: {
         position: "relative",
         width: "100%",
-        height: y() + G
+        height: A() + V
       },
-      children: /* @__PURE__ */ e(I, {
+      children: /* @__PURE__ */ e(T, {
         ...h,
         style: {
           position: "absolute",
@@ -124,10 +127,10 @@ const G = 40, ee = ({
         virtualItems: p
       })
     })
-  }) : /* @__PURE__ */ e(I, {
+  }) : /* @__PURE__ */ e(T, {
     ...h
   });
 };
 export {
-  ee as MetadataTable
+  ae as MetadataTable
 };

package/dist/esm/lib/index.js

@@ -1,54 +1,56 @@
-import { MetadataView as r } from "./metadata-view.js";
+import { MetadataView as o } from "./metadata-view.js";
 import { I as a, V as i } from "../../chunks/types.js";
 import { ActionBar as m } from "./components/action-bar/action-bar.js";
 import { FilterRow as x } from "./components/filter-row/filter-row.js";
 import { F as n } from "../../chunks/form-filter-chip.js";
 import { MetadataFilterChip as F } from "./components/filter-row/metadata-filter-chip.js";
 import { SelectFilterChip as s } from "./components/filter-row/select-filter-chip.js";
-import { Filter as c } from "./components/filter-sidepanel/filter.js";
-import { FilterSidePanel as g } from "./components/filter-sidepanel/filter-side-panel.js";
-import { ItemActionMenu as P } from "./components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as I } from "./components/metadata-grid/metadata-grid.js";
-import { MetadataTable as B } from "./components/metadata-table/metadata-table.js";
-import { InlineEditingCell as b } from "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
-import { TableRenderer as A } from "./components/metadata-table/table-renderer.js";
-import { MetadataFileChip as k } from "./components/metadata-value/metadata-file-chip.js";
-import { MetadataFileField as E } from "./components/metadata-value/metadata-file-field.js";
-import { MetadataLocationField as L } from "./components/metadata-value/metadata-location-field.js";
-import { MetadataRadioField as j } from "./components/metadata-value/metadata-radio-field.js";
-import { MetadataSearchField as v } from "./components/metadata-value/metadata-search-field.js";
-import { Pagination as z } from "./components/pagination/pagination.js";
-import { MarkerBasedPagination as J } from "./components/pagination/marker-based-pagination.js";
-import { OffsetBasedPagination as N } from "./components/pagination/offset-based-pagination.js";
-import { PaginationControls as U } from "./components/pagination/pagination-controls.js";
-import { SortDropdown as X } from "./components/sort-dropdown/sort-dropdown.js";
-import { Case as Z, SwitchCase as _ } from "./components/switch-case/switch-case.js";
+import { PredefinedFilterName as c } from "./components/filter-row/predefinedFilters/index.js";
+import { Filter as P } from "./components/filter-sidepanel/filter.js";
+import { FilterSidePanel as w } from "./components/filter-sidepanel/filter-side-panel.js";
+import { ItemActionMenu as I } from "./components/item-action-menu/item-action-menu.js";
+import { MetadataGrid as B } from "./components/metadata-grid/metadata-grid.js";
+import { MetadataTable as b } from "./components/metadata-table/metadata-table.js";
+import { InlineEditingCell as A } from "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
+import { TableRenderer as k } from "./components/metadata-table/table-renderer.js";
+import { MetadataFileChip as E } from "./components/metadata-value/metadata-file-chip.js";
+import { MetadataFileField as L } from "./components/metadata-value/metadata-file-field.js";
+import { MetadataLocationField as O } from "./components/metadata-value/metadata-location-field.js";
+import { MetadataRadioField as q } from "./components/metadata-value/metadata-radio-field.js";
+import { MetadataSearchField as y } from "./components/metadata-value/metadata-search-field.js";
+import { Pagination as H } from "./components/pagination/pagination.js";
+import { MarkerBasedPagination as K } from "./components/pagination/marker-based-pagination.js";
+import { OffsetBasedPagination as U } from "./components/pagination/offset-based-pagination.js";
+import { PaginationControls as X } from "./components/pagination/pagination-controls.js";
+import { SortDropdown as Z } from "./components/sort-dropdown/sort-dropdown.js";
+import { Case as $, SwitchCase as ee } from "./components/switch-case/switch-case.js";
 export {
   m as ActionBar,
-  Z as Case,
-  c as Filter,
+  $ as Case,
+  P as Filter,
   x as FilterRow,
-  g as FilterSidePanel,
+  w as FilterSidePanel,
   n as FormFilterChip,
   a as IconColumnVariant,
-  b as InlineEditingCell,
-  P as ItemActionMenu,
-  J as MarkerBasedPagination,
-  k as MetadataFileChip,
-  E as MetadataFileField,
+  A as InlineEditingCell,
+  I as ItemActionMenu,
+  K as MarkerBasedPagination,
+  E as MetadataFileChip,
+  L as MetadataFileField,
   F as MetadataFilterChip,
-  I as MetadataGrid,
-  L as MetadataLocationField,
-  j as MetadataRadioField,
-  v as MetadataSearchField,
-  B as MetadataTable,
-  r as MetadataView,
-  N as OffsetBasedPagination,
-  z as Pagination,
-  U as PaginationControls,
+  B as MetadataGrid,
+  O as MetadataLocationField,
+  q as MetadataRadioField,
+  y as MetadataSearchField,
+  b as MetadataTable,
+  o as MetadataView,
+  U as OffsetBasedPagination,
+  H as Pagination,
+  X as PaginationControls,
+  c as PredefinedFilterName,
   s as SelectFilterChip,
-  X as SortDropdown,
-  _ as SwitchCase,
-  A as TableRenderer,
+  Z as SortDropdown,
+  ee as SwitchCase,
+  k as TableRenderer,
   i as ViewMode
 };

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

@@ -1,14 +1,15 @@
-import { I as T, V as o } from "../../chunks/types.js";
-import { ActionBar as _ } from "./components/action-bar/action-bar.js";
+import { I as _, V as o } from "../../chunks/types.js";
+import { ActionBar as x } from "./components/action-bar/action-bar.js";
 import "./components/filter-row/filter-row.js";
 import "../../chunks/form-filter-chip.js";
 import "./components/filter-row/metadata-filter-chip.js";
 import "./components/filter-row/select-filter-chip.js";
+import "./components/filter-row/predefinedFilters/index.js";
 import "./components/filter-sidepanel/filter.js";
 import "./components/filter-sidepanel/filter-side-panel.js";
 import "./components/item-action-menu/item-action-menu.js";
-import { MetadataGrid as x } from "./components/metadata-grid/metadata-grid.js";
-import { MetadataTable as E } from "./components/metadata-table/metadata-table.js";
+import { MetadataGrid as E } from "./components/metadata-grid/metadata-grid.js";
+import { MetadataTable as N } from "./components/metadata-table/metadata-table.js";
 import "./components/metadata-table/table-body/inline-editing-cell/inline-editing-cell.js";
 import "./components/metadata-table/table-renderer.js";
 import "./components/metadata-value/metadata-file-chip.js";
@@ -16,75 +17,77 @@ import "./components/metadata-value/metadata-file-field.js";
 import "./components/metadata-value/metadata-location-field.js";
 import "./components/metadata-value/metadata-radio-field.js";
 import "./components/metadata-value/metadata-search-field.js";
-import { Pagination as N } from "./components/pagination/pagination.js";
+import { Pagination as R } from "./components/pagination/pagination.js";
 import "./components/pagination/marker-based-pagination.js";
 import "./components/pagination/offset-based-pagination.js";
 import "./components/pagination/pagination-controls.js";
 import "./components/sort-dropdown/sort-dropdown.js";
 import { SwitchCase as b, Case as a } from "./components/switch-case/switch-case.js";
 import { TooltipProvider as g } from "@box/blueprint-web";
-import { useState as f } from "react";
-import { jsx as t, jsxs as h, Fragment as k } from "react/jsx-runtime";
-import { ErrorState as D } from "./components/error-state/error-state.js";
-import G from "./components/empty-state/empty-state.js";
-import '../../styles/metadata-view.css';const j = "_container_nykl3_5", R = "_contentContainer_nykl3_14", M = {
-  container: j,
-  contentContainer: R
+import { useState as h, useRef as k } from "react";
+import { jsx as t, jsxs as u, Fragment as D } from "react/jsx-runtime";
+import { ErrorState as G } from "./components/error-state/error-state.js";
+import j from "./components/empty-state/empty-state.js";
+import '../../styles/metadata-view.css';const Z = "_container_nykl3_5", z = "_contentContainer_nykl3_14", M = {
+  container: Z,
+  contentContainer: z
 };
-function st({
-  actionBarProps: n,
+function ht({
+  actionBarProps: i,
   columns: c,
   tableProps: p,
-  hasError: u,
-  onRefresh: I,
-  initialViewMode: S = o.LIST,
+  hasError: I,
+  onRefresh: S,
+  initialViewMode: V = o.LIST,
   paginationProps: l,
-  isLoading: d,
+  isLoading: s,
   ...r
 }) {
-  const [e, s] = f(S), [m, V] = f(0), w = () => {
-    e === o.LIST ? s(o.GRID) : s(o.LIST);
-  }, v = !d && r.items.length === 0, y = n && n.sortDropdownProps && c.filter((i) => i.type !== "multiSelect" && i.type !== "enum").map((i) => i.textValue), {
+  const [e, d] = h(V), [m, w] = h(0), f = k(null), v = () => {
+    e === o.LIST ? d(o.GRID) : d(o.LIST);
+  }, y = !s && r.items.length === 0, L = i && i.sortDropdownProps && c.filter((n) => n.type !== "multiSelect" && n.type !== "enum").map((n) => n.textValue), {
     iconColumnVariant: C
-  } = p || {}, L = C && C === T.COLUMN;
+  } = p || {}, T = C && C === _.COLUMN;
   return /* @__PURE__ */ t(g, {
     children: /* @__PURE__ */ t("div", {
+      ref: f,
       className: M.container,
-      children: u ? /* @__PURE__ */ t(D, {
-        onRefresh: I
-      }) : /* @__PURE__ */ h(k, {
-        children: [/* @__PURE__ */ t(_, {
-          ...n,
-          isIconColumnEnabled: L,
-          onViewModeClick: w,
-          onZoomLevelChange: V,
-          sortableColumnNames: y,
+      children: I ? /* @__PURE__ */ t(G, {
+        onRefresh: S
+      }) : /* @__PURE__ */ u(D, {
+        children: [/* @__PURE__ */ t(x, {
+          ...i,
+          containerRef: f,
+          isIconColumnEnabled: T,
+          onViewModeClick: v,
+          onZoomLevelChange: w,
+          sortableColumnNames: L,
           viewMode: e,
           zoomLevel: m
         }), /* @__PURE__ */ t("div", {
           className: M.contentContainer,
-          children: /* @__PURE__ */ h(b, {
+          children: /* @__PURE__ */ u(b, {
             children: [/* @__PURE__ */ t(a, {
-              condition: v,
-              children: /* @__PURE__ */ t(G, {})
+              condition: y,
+              children: /* @__PURE__ */ t(j, {})
             }), /* @__PURE__ */ t(a, {
               condition: e === o.LIST,
-              children: /* @__PURE__ */ t(E, {
+              children: /* @__PURE__ */ t(N, {
                 columns: c,
-                isLoading: d,
+                isLoading: s,
                 zoomLevel: m,
                 ...r,
                 ...p
               })
             }), /* @__PURE__ */ t(a, {
               condition: e === o.GRID,
-              children: /* @__PURE__ */ t(x, {
+              children: /* @__PURE__ */ t(E, {
                 zoomLevel: m,
                 ...r
               })
             })]
           })
-        }), l && /* @__PURE__ */ t(N, {
+        }), l && /* @__PURE__ */ t(R, {
           ...l
         })]
       })
@@ -92,6 +95,6 @@ function st({
   });
 }
 export {
-  st as MetadataView,
-  st as default
+  ht as MetadataView,
+  ht as default
 };

package/dist/types/lib/components/filter-row/all-filters-chip.d.ts

@@ -1,6 +1,7 @@
 import { FilterGroup } from './types';
 interface AllFiltersChipProps {
+    containerRef?: React.RefObject<HTMLElement>;
     filterGroups: Array<FilterGroup>;
 }
-declare const AllFiltersChip: ({ filterGroups }: AllFiltersChipProps) => import("react/jsx-runtime").JSX.Element;
+declare const AllFiltersChip: ({ containerRef, filterGroups }: AllFiltersChipProps) => import("react/jsx-runtime").JSX.Element;
 export default AllFiltersChip;

package/dist/types/lib/components/filter-row/filter-row.d.ts

@@ -2,9 +2,10 @@ import { PredefinedFilterOptions } from './predefinedFilters/types';
 import { FilterGroup, FilterValues, InitialFilterValues } from './types';
 export interface FilterRowProps {
     predefinedFilterOptions?: Partial<PredefinedFilterOptions>;
+    containerRef?: React.RefObject<HTMLElement>;
     filterGroups?: Array<FilterGroup>;
     initialFilterValues?: InitialFilterValues;
     isAllFiltersDisabled?: boolean;
     onFilterSubmit?: (fields: FilterValues) => void;
 }
-export declare const FilterRow: ({ predefinedFilterOptions, filterGroups: customFilterGroups, initialFilterValues: customFilterValues, isAllFiltersDisabled, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterRow: ({ predefinedFilterOptions, containerRef, filterGroups: customFilterGroups, initialFilterValues: customFilterValues, isAllFiltersDisabled, onFilterSubmit, }: FilterRowProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/filter-row/index.d.ts

@@ -6,4 +6,5 @@ export { MetadataFilterChip } from './metadata-filter-chip';
 export type { MetadataFilterChipProps } from './metadata-filter-chip';
 export { SelectFilterChip } from './select-filter-chip';
 export type { SelectFilterChipProps } from './select-filter-chip';
+export * from './predefinedFilters';
 export * from './types';

package/dist/types/lib/components/filter-row/predefinedFilters/index.d.ts

@@ -0,0 +1 @@
+export * from './types';

package/dist/types/lib/components/filter-row/predefinedFilters/types.d.ts

@@ -9,7 +9,7 @@ export interface PredefinedFilterOption {
     renderer?: (originalComponent: ReactNode) => ReactNode;
 }
 interface LocationFilterOptionDefinition extends PredefinedFilterOption {
-    triggerCallback: (folderId: string, folderName: string, isFolderShared?: boolean) => void;
+    triggerCallback?: (folderId: string, folderName: string, isFolderShared?: boolean) => void;
 }
 export type LocationFilterOption = {
     isDisabled: true;

package/dist/types/lib/components/filter-sidepanel/filter-side-panel.d.ts

@@ -1,8 +1,9 @@
 import { FilterGroup } from '../filter-row/types';
 export interface FilterSidePanelProps {
+    containerRef?: React.RefObject<HTMLElement>;
     filterGroups: Array<FilterGroup>;
     isOpen?: boolean;
     onIsOpenChange?: (isOpen: boolean) => void;
     getInitialFormValues: () => void;
 }
-export declare const FilterSidePanel: ({ filterGroups, isOpen, onIsOpenChange, getInitialFormValues, }: FilterSidePanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterSidePanel: ({ containerRef, filterGroups, isOpen, onIsOpenChange, getInitialFormValues, }: FilterSidePanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,7 @@ export interface Column extends Partial<ColumnProps> {
     inlineEditingOptions?: string[];
     subtitle?: string;
     textValue?: string;
-    type?: MetadataFieldType;
+    type: MetadataFieldType;
 }
 export declare enum IconColumnVariant {
     INLINE = "inline",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.48.4",
+    "version": "0.48.6",
     "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.65.0",
-        "@box/box-item-type-selector": "^0.69.3",
+        "@box/box-item-type-selector": "^0.69.4",
         "@box/eslint-plugin-blueprint": "*",
-        "@box/item-icon": "^0.23.3",
-        "@box/metadata-filter": "^1.26.0",
+        "@box/item-icon": "^0.23.4",
+        "@box/metadata-filter": "^1.26.1",
         "@box/storybook-utils": "0.14.1",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",

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

@@ -1,25 +0,0 @@
-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
-};