@box/metadata-view 0.48.3 → 0.48.5

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,42 +1,44 @@
-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 = ({
+const P = ({
   predefinedFilterOptions: m,
-  filterGroups: s = [],
-  initialFilterValues: a,
-  isAllFiltersDisabled: p,
+  containerRef: s,
+  filterGroups: a = [],
+  initialFilterValues: 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, ...a], l = t.flatMap(({
     filters: i
-  }) => i), u = R(l, a), o = F(null);
-  return /* @__PURE__ */ e(c, {
+  }) => i), d = G(l, p), o = C(null);
+  return /* @__PURE__ */ e(h, {
     enableReinitialize: !0,
-    initialValues: u,
-    onSubmit: f,
-    children: /* @__PURE__ */ e(h, {
+    initialValues: d,
+    onSubmit: u,
+    children: /* @__PURE__ */ e(F, {
       ref: o,
-      children: /* @__PURE__ */ b(d.Group, {
-        className: V.filterChipGroup,
+      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, {
+        }), l.filter((i) => i.shouldRenderChip).map((i) => /* @__PURE__ */ e(x, {
           filterOption: i,
           formRef: o
         }, i.id))]
@@ -45,5 +47,5 @@ const N = ({
   });
 };
 export {
-  N as FilterRow
+  P as FilterRow
 };

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/metadata-view.js

@@ -1,5 +1,5 @@
-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";
@@ -7,8 +7,8 @@ import "./components/filter-row/select-filter-chip.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 +16,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 Ct({
+  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 +94,6 @@ function st({
   });
 }
 export {
-  st as MetadataView,
-  st as default
+  Ct as MetadataView,
+  Ct 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-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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-view",
-    "version": "0.48.3",
+    "version": "0.48.5",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
         "@box/blueprint-web": "^11.12.0",
@@ -23,7 +23,7 @@
         "@box/box-item-type-selector": "^0.69.3",
         "@box/eslint-plugin-blueprint": "*",
         "@box/item-icon": "^0.23.3",
-        "@box/metadata-filter": "^1.25.3",
+        "@box/metadata-filter": "^1.26.0",
         "@box/storybook-utils": "0.14.1",
         "@box/types": "0.2.1",
         "@tanstack/react-virtual": "^3.10.8",