@box/metadata-filter 1.74.1 → 1.75.0

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field-advanced.js

@@ -1,82 +1,86 @@
-import { TooltipProvider as $, Combobox as j } from "@box/blueprint-web";
-import { useFormikContext as D, getIn as H, Field as P } from "formik";
-import { useState as p, useCallback as f } from "react";
-import { useIntl as U } from "react-intl";
-import Y from "../../../../messages.js";
-import { F as d } from "../../../../../../chunks/types.js";
-import { fieldDefaultProps as q } from "../constants.js";
-import { getInitialAdvancedFilterValue as z, createFieldValue as I, getInputValue as G } from "./utils.js";
-import { jsx as a, jsxs as J, Fragment as Q } from "react/jsx-runtime";
-import { A as R } from "../../../../../../chunks/index.js";
-const S = (t) => t === d.IS_BLANK || t === d.IS_NOT_BLANK, ae = ({
-  label: t,
-  fieldNamePrefix: i,
+import { TooltipProvider as U, Combobox as Y } from "@box/blueprint-web";
+import { useFormikContext as q, getIn as G, Field as J } from "formik";
+import { useMemo as Q, useState as p, useRef as w, useCallback as s } from "react";
+import { useIntl as W } from "react-intl";
+import X from "../../../../messages.js";
+import { F as f } from "../../../../../../chunks/types.js";
+import { fieldDefaultProps as Z } from "../constants.js";
+import { getInitialAdvancedFilterValue as E, createFieldValue as y, getInputValue as ee } from "./utils.js";
+import { jsx as a, jsxs as te, Fragment as oe } from "react/jsx-runtime";
+import { A as ne } from "../../../../../../chunks/index.js";
+const T = (o) => o === f.IS_BLANK || o === f.IS_NOT_BLANK, he = ({
+  label: o,
+  fieldNamePrefix: c,
   disableForm: h,
   isAdvancedFilterEnabled: r,
-  onAdvancedFilterOptionChange: c,
+  onAdvancedFilterOptionChange: i,
   fieldAdvancedFilterOptions: g,
-  filterOptionsMap: C,
-  portalElement: V,
-  hasAccordion: b,
-  isModified: x
+  filterOptionsMap: d,
+  portalElement: C,
+  hasAccordion: k,
+  isModified: v,
+  hasExperimentalVirtualization: M
 }) => {
   const {
-    setFieldValue: L,
-    values: v
-  } = D(), w = U(), l = `${i}.value.enum`, y = H(v, `${i}.options`, []).map((e) => e?.key).filter((e) => typeof e == "string"), [u, T] = p(z(g, C) || d.MATCH_ANY), [k, O] = p(!1), [A, F] = p(!1), _ = (e, o) => typeof o != "string" ? !1 : o.toLowerCase().includes(e.toLowerCase()), B = f((e, o, n) => {
-    const s = e;
-    T(s), c?.(l, s);
-    const m = S(e) ? [] : o, N = I(m, e, r);
-    n.setFieldValue(l, N);
-  }, [l, r, c]), K = f((e) => {
-    O(e), e && F(!1);
-  }, []), M = f((e) => {
-    F(e), e && O(!1);
-  }, []);
+    setFieldValue: V,
+    values: O
+  } = q(), S = W(), n = `${c}.value.enum`, _ = Q(() => G(O, `${c}.options`, []).map((e) => e?.key).filter((e) => typeof e == "string"), [O, c]), [u, A] = p(E(g, d) || f.MATCH_ANY), [B, I] = p(!1), [K, F] = p(!1), R = (e, t) => typeof t != "string" ? !1 : t.toLowerCase().includes(e.toLowerCase()), x = w([]), m = w(null), L = s((e, t, l) => {
+    const b = e;
+    A(b), i?.(n, b);
+    const H = T(e) ? [] : t, P = y(H, e, r);
+    l.setFieldValue(n, P);
+  }, [n, r, i]), $ = s((e) => {
+    m.current && L(e, x.current, m.current);
+  }, [L]), j = s((e) => {
+    const t = y(e, u, r);
+    V(n, t);
+  }, [u, n, r, V]), N = s((e) => {
+    I(e), e && F(!1);
+  }, []), z = s((e) => {
+    F(e), e && I(!1);
+  }, []), D = s((e) => !e || e.length === 0 ? S.formatMessage(X.multiselectPlaceholder) : "", [S]);
   return /* @__PURE__ */ a("div", {
-    "data-testid": `${t}-field`,
-    children: /* @__PURE__ */ a(P, {
-      name: l,
+    "data-testid": `${o}-field`,
+    children: /* @__PURE__ */ a(J, {
+      name: n,
       children: ({
         field: e,
-        form: o
+        form: t
       }) => {
-        const n = G(e.value, r);
-        return /* @__PURE__ */ J(Q, {
-          children: [/* @__PURE__ */ a(R, {
+        const l = ee(e.value, r);
+        return x.current = l, m.current = t, /* @__PURE__ */ te(oe, {
+          children: [/* @__PURE__ */ a(ne, {
             disableForm: h,
             fieldAdvancedFilterOptions: g,
-            fieldNamePrefix: i,
-            filterOptionsMap: C,
-            isModified: x,
-            label: t,
-            onAdvancedFilterOptionChange: c,
-            onOpenChange: M,
-            onValueChange: (s) => B(s, n, o),
-            open: A,
-            portalElement: V,
-            showLabel: !b,
+            fieldNamePrefix: c,
+            filterOptionsMap: d,
+            isModified: v,
+            label: o,
+            onAdvancedFilterOptionChange: i,
+            onOpenChange: z,
+            onValueChange: $,
+            open: K,
+            portalElement: C,
+            showLabel: !k,
             value: u
-          }), !S(u) && /* @__PURE__ */ a($, {
-            children: /* @__PURE__ */ a(j, {
-              ...q,
+          }), !T(u) && /* @__PURE__ */ a(U, {
+            children: /* @__PURE__ */ a(Y, {
+              ...Z,
               as: "input",
               disabled: h,
-              filterFn: _,
+              experimentalVirtualization: M,
+              filterFn: R,
               hideLabel: !0,
-              label: t,
+              label: o,
               multiselect: !0,
               name: e.name,
-              onOpenChange: K,
-              onValueChange: (s) => {
-                const m = I(s, u, r);
-                L(l, m);
-              },
-              open: k,
-              options: y,
-              placeholder: !n || n.length === 0 ? w.formatMessage(Y.multiselectPlaceholder) : "",
-              portalElement: V,
-              value: n
+              onOpenChange: N,
+              onValueChange: j,
+              open: B,
+              options: _,
+              placeholder: D(l),
+              portalElement: C,
+              value: l
             })
           })]
         });
@@ -85,5 +89,5 @@ const S = (t) => t === d.IS_BLANK || t === d.IS_NOT_BLANK, ae = ({
   });
 };
 export {
-  ae as MetadataMultiSelectFieldAdvanced
+  he as MetadataMultiSelectFieldAdvanced
 };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field.js

@@ -1,47 +1,50 @@
-import { TooltipProvider as h, Combobox as f } from "@box/blueprint-web";
-import { useFormikContext as v, getIn as g, Field as C } from "formik";
-import { useIntl as F } from "react-intl";
-import b from "../../../../messages.js";
-import { fieldDefaultProps as $ } from "../constants.js";
-import { jsx as t } from "react/jsx-runtime";
-const j = ({
-  disableForm: n,
-  fieldNamePrefix: o,
-  label: l,
-  portalElement: s,
-  hasAccordion: i
+import { TooltipProvider as b, Combobox as f } from "@box/blueprint-web";
+import { useFormikContext as F, getIn as M, Field as V } from "formik";
+import { useMemo as $, useCallback as l } from "react";
+import { useIntl as x } from "react-intl";
+import L from "../../../../messages.js";
+import { fieldDefaultProps as k } from "../constants.js";
+import { jsx as o } from "react/jsx-runtime";
+const T = ({
+  disableForm: m,
+  fieldNamePrefix: t,
+  label: r,
+  portalElement: u,
+  hasAccordion: d,
+  hasExperimentalVirtualization: c
 }) => {
   const {
-    setFieldValue: m,
-    values: u
-  } = v(), d = F(), r = `${o}.value.enum`, c = g(u, `${o}.options`, []).map(({
+    setFieldValue: n,
+    values: s
+  } = F(), i = x(), a = `${t}.value.enum`, p = $(() => M(s, `${t}.options`, []).map(({
     key: e
-  }) => e), p = (e, a) => a.toLowerCase().includes(e.toLowerCase());
-  return /* @__PURE__ */ t("div", {
-    "data-testid": `${l}-field`,
-    children: /* @__PURE__ */ t(C, {
-      name: r,
+  }) => e), [s, t]), h = l((e, v) => v.toLowerCase().includes(e.toLowerCase()), []), g = l((e) => n(a, e), [n, a]), C = l((e) => (
+    // Empty array must be substituted if there is no value found
+    // Otherwise no placeholder appears despite no selection
+    (e || [])?.length === 0 ? i.formatMessage(L.multiselectPlaceholder) : ""
+  ), [i]);
+  return /* @__PURE__ */ o("div", {
+    "data-testid": `${r}-field`,
+    children: /* @__PURE__ */ o(V, {
+      name: a,
       children: ({
         field: e
-      }) => /* @__PURE__ */ t(h, {
-        children: /* @__PURE__ */ t(f, {
-          ...$,
+      }) => /* @__PURE__ */ o(b, {
+        children: /* @__PURE__ */ o(f, {
+          ...k,
           as: "input",
-          "data-target-id": `Combobox-${o}`,
-          disabled: n,
-          filterFn: p,
-          hideLabel: i,
-          label: l,
+          "data-target-id": `Combobox-${t}`,
+          disabled: m,
+          filterFn: h,
+          hideLabel: d,
+          label: r,
           multiselect: !0,
+          experimentalVirtualization: c,
           name: e.name,
-          onValueChange: (a) => m(r, a),
-          options: c,
-          placeholder: (
-            // Empty array must be substituded if there is no value found
-            // Otherwise an no placeholder appears despite no selection
-            (e.value || [])?.length === 0 ? d.formatMessage(b.multiselectPlaceholder) : ""
-          ),
-          portalElement: s,
+          onValueChange: g,
+          options: p,
+          placeholder: C(e.value),
+          portalElement: u,
           value: e.value
         })
       })
@@ -49,6 +52,6 @@ const j = ({
   });
 };
 export {
-  j as MetadataMultiSelectField,
-  j as default
+  T as MetadataMultiSelectField,
+  T as default
 };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field-advanced.js

@@ -1,105 +1,105 @@
 import { ComboboxWithApiTreeView as J, ComboboxWithApiPagination as N } from "@box/combobox-with-api";
-import L from "clsx";
+import j from "clsx";
 import { useFormikContext as Q, getIn as X, Field as Y } from "formik";
-import { useState as y, useCallback as h } from "react";
+import { useState as F, useCallback as c } from "react";
 import { useIntl as Z } from "react-intl";
 import E from "../../../../messages.js";
-import { getInitialAdvancedFilterValue as ee, createFieldValue as A, getInputValue as oe, isBlankOption as j } from "./utils.js";
-import { jsx as t, jsxs as te, Fragment as le } from "react/jsx-runtime";
-import { A as se } from "../../../../../../chunks/index.js";
-import '../../../../../../styles/metadata-taxonomy-field-advanced.css';const ae = "_comboboxWrapper_1e1d8_1", ne = "_disabled_1e1d8_1", ie = "_disabledTreeView_1e1d8_5", b = {
+import { getInitialAdvancedFilterValue as ee, isBlankOption as M, createFieldValue as P, getInputValue as oe } from "./utils.js";
+import { jsx as s, jsxs as te, Fragment as se } from "react/jsx-runtime";
+import { A as le } from "../../../../../../chunks/index.js";
+import '../../../../../../styles/metadata-taxonomy-field-advanced.css';const ae = "_comboboxWrapper_1e1d8_1", ne = "_disabled_1e1d8_1", ce = "_disabledTreeView_1e1d8_5", V = {
   comboboxWrapper: ae,
   disabled: ne,
-  disabledTreeView: ie
-}, Ve = ({
+  disabledTreeView: ce
+}, ge = ({
   className: g,
   disableForm: l,
-  fieldNamePrefix: r,
-  label: d,
-  portalElement: u,
-  taxonomyOptionsFetcher: m,
-  isMultilevelTaxonomyFieldEnabled: M,
-  hasAccordion: P,
-  isAdvancedFilterEnabled: n,
-  onAdvancedFilterOptionChange: V,
+  fieldNamePrefix: d,
+  label: u,
+  portalElement: m,
+  taxonomyOptionsFetcher: p,
+  isMultilevelTaxonomyFieldEnabled: $,
+  hasAccordion: A,
+  isAdvancedFilterEnabled: a,
+  onAdvancedFilterOptionChange: h,
   fieldAdvancedFilterOptions: f,
-  filterOptionsMap: v,
-  isModified: $
+  filterOptionsMap: C,
+  isModified: B
 }) => {
   const {
-    setFieldValue: C,
+    setFieldValue: v,
     values: x
   } = Q(), {
     metadata: {
       templateKey: _,
       scope: w
     }
-  } = x, B = Z(), s = `${r}.value`, K = X(x, r), {
-    key: T,
+  } = x, T = Z(), t = `${d}.value`, K = X(x, d), {
+    key: W,
     optionsRules: R,
     levels: U
-  } = K, W = !0, i = R?.selectableLevels, q = M && i?.some((e) => e > 1), [c, z] = y(ee(f, v)), [D, k] = y(!1), I = h((e) => m ? m(w, _, T, i?.[0] ?? 0, e) : Promise.resolve({
+  } = K, k = !0, i = R?.selectableLevels, q = $ && i?.some((e) => e > 1), [r, z] = F(ee(f, C)), [D, I] = F(!1), S = c((e) => p ? p(w, _, W, i?.[0] ?? 0, e) : Promise.resolve({
     options: []
-  }), [T, w, i, m, _]), O = (e) => e?.length === 0 ? B.formatMessage(E.multiselectPlaceholder) : "", G = (e, a, o) => {
-    z(e), V?.(s, e);
-    const p = j(e) ? [] : a, H = A(p, e, n);
-    o.setFieldValue(s, H);
-  }, S = h((e) => {
-    e && k(!1);
-  }, []), F = h((e) => {
-    const a = A(e, c, n);
-    C(s, a);
-  }, [c, s, n, C]);
-  return /* @__PURE__ */ t("div", {
-    "data-testid": `${d}-field`,
-    children: /* @__PURE__ */ t(Y, {
-      name: s,
+  }), [W, w, i, p, _]), L = c((e) => e?.length === 0 ? T.formatMessage(E.multiselectPlaceholder) : "", [T]), G = c((e, n, o) => {
+    z(e), h?.(t, e);
+    const b = M(e) ? [] : n, H = P(b, e, a);
+    o.setFieldValue(t, H);
+  }, [t, a, h]), O = c((e) => {
+    e && I(!1);
+  }, []), y = c((e) => {
+    const n = P(e, r, a);
+    v(t, n);
+  }, [r, t, a, v]);
+  return /* @__PURE__ */ s("div", {
+    "data-testid": `${u}-field`,
+    children: /* @__PURE__ */ s(Y, {
+      name: t,
       children: ({
         field: e,
-        form: a
+        form: n
       }) => {
-        const o = oe(e.value, n);
-        return /* @__PURE__ */ te(le, {
-          children: [/* @__PURE__ */ t(se, {
+        const o = oe(e.value, a);
+        return /* @__PURE__ */ te(se, {
+          children: [/* @__PURE__ */ s(le, {
             disableForm: l ?? !1,
             fieldAdvancedFilterOptions: f,
-            fieldNamePrefix: r,
-            filterOptionsMap: v,
-            isModified: $,
-            label: d,
-            onAdvancedFilterOptionChange: V,
-            onOpenChange: k,
-            onValueChange: (p) => G(p, o, a),
+            fieldNamePrefix: d,
+            filterOptionsMap: C,
+            isModified: B,
+            label: u,
+            onAdvancedFilterOptionChange: h,
+            onOpenChange: I,
+            onValueChange: (b) => G(b, o, n),
             open: D,
-            portalElement: u,
-            showLabel: !P,
-            value: c
-          }), !j(c) && /* @__PURE__ */ t("div", {
-            className: L(b.comboboxWrapper, l && b.disabled),
-            children: q ? /* @__PURE__ */ t(J, {
-              className: L(g, l && b.disabledTreeView),
-              defaultFetcher: I,
+            portalElement: m,
+            showLabel: !A,
+            value: r
+          }), !M(r) && /* @__PURE__ */ s("div", {
+            className: j(V.comboboxWrapper, l && V.disabled),
+            children: q ? /* @__PURE__ */ s(J, {
+              className: j(g, l && V.disabledTreeView),
+              defaultFetcher: S,
               disabled: l,
               hideLabel: !0,
-              label: d,
+              label: u,
               levels: U,
-              multiselect: W,
-              onOpenChange: S,
-              onValueChange: F,
-              placeholder: O(o),
-              portalElement: u,
+              multiselect: k,
+              onOpenChange: O,
+              onValueChange: y,
+              placeholder: L(o),
+              portalElement: m,
               selectableLevels: i,
               value: o
-            }) : /* @__PURE__ */ t(N, {
+            }) : /* @__PURE__ */ s(N, {
               className: g,
-              defaultFetcher: I,
+              defaultFetcher: S,
               disabled: l,
               label: void 0,
-              multiselect: W,
-              onOpenChange: S,
-              onValueChange: F,
-              placeholder: O(o),
-              portalElement: u,
+              multiselect: k,
+              onOpenChange: O,
+              onValueChange: y,
+              placeholder: L(o),
+              portalElement: m,
               value: o
             })
           })]
@@ -109,6 +109,6 @@ import '../../../../../../styles/metadata-taxonomy-field-advanced.css';const ae
   });
 };
 export {
-  Ve as MetadataTaxonomyFieldAdvanced,
-  Ve as default
+  ge as MetadataTaxonomyFieldAdvanced,
+  ge as default
 };

package/dist/esm/lib/components/metadata-filter-fields/components/metadata-taxonomy-field/metadata-taxonomy-field.js

@@ -1,61 +1,61 @@
-import { ComboboxWithApiTreeView as M, ComboboxWithApiPagination as T } from "@box/combobox-with-api";
-import { useFormikContext as I, getIn as L, Field as P } from "formik";
-import { useCallback as W } from "react";
+import { ComboboxWithApiTreeView as T, ComboboxWithApiPagination as I } from "@box/combobox-with-api";
+import { useFormikContext as L, getIn as P, Field as W } from "formik";
+import { useCallback as n } from "react";
 import { useIntl as $ } from "react-intl";
 import j from "../../../../messages.js";
-import { jsx as o } from "react/jsx-runtime";
+import { jsx as l } from "react/jsx-runtime";
 const z = ({
-  className: n,
+  className: i,
   disableForm: r,
   fieldNamePrefix: u,
-  label: l,
+  label: a,
   portalElement: m,
   taxonomyOptionsFetcher: d,
-  isMultilevelTaxonomyFieldEnabled: C,
+  isMultilevelTaxonomyFieldEnabled: k,
   hasAccordion: c
 }) => {
   const {
     setFieldValue: v,
-    values: p
-  } = I(), {
+    values: h
+  } = L(), {
     metadata: {
-      templateKey: h,
+      templateKey: p,
       scope: g
     }
-  } = p, k = $(), a = `${u}.value`, y = L(p, u), {
-    key: b,
+  } = h, b = $(), s = `${u}.value`, y = P(h, u), {
+    key: f,
     optionsRules: {
-      multiSelect: s,
-      selectableLevels: t
+      multiSelect: t,
+      selectableLevels: o
     },
     levels: F
-  } = y, V = C && t?.some((e) => e > 1), f = W((e) => d(g, h, b, t?.[0], e), [b, g, t, d, h]), x = (e) => s || !e?.length ? k.formatMessage(j.taxonomyPlaceholder) : void 0;
-  return /* @__PURE__ */ o("div", {
-    "data-testid": `${l}-field`,
-    children: /* @__PURE__ */ o(P, {
-      name: a,
+  } = y, M = k && o?.some((e) => e > 1), C = n((e) => d(g, p, f, o?.[0], e), [f, g, o, d, p]), x = n((e) => t || !e?.length ? b.formatMessage(j.taxonomyPlaceholder) : void 0, [t, b]), V = n((e) => v(s, e), [v, s]);
+  return /* @__PURE__ */ l("div", {
+    "data-testid": `${a}-field`,
+    children: /* @__PURE__ */ l(W, {
+      name: s,
       children: ({
         field: e
-      }) => V ? /* @__PURE__ */ o(M, {
-        className: n,
-        defaultFetcher: f,
+      }) => M ? /* @__PURE__ */ l(T, {
+        className: i,
+        defaultFetcher: C,
         disabled: r,
         hideLabel: c,
-        label: l,
+        label: a,
         levels: F,
-        multiselect: s,
-        onValueChange: (i) => v(a, i),
+        multiselect: t,
+        onValueChange: V,
         placeholder: x(e.value),
         portalElement: m,
-        selectableLevels: t,
+        selectableLevels: o,
         value: e.value
-      }) : /* @__PURE__ */ o(T, {
-        className: n,
-        defaultFetcher: f,
+      }) : /* @__PURE__ */ l(I, {
+        className: i,
+        defaultFetcher: C,
         disabled: r,
-        label: c ? void 0 : l,
-        multiselect: s,
-        onValueChange: (i) => v(a, i),
+        label: c ? void 0 : a,
+        multiselect: t,
+        onValueChange: V,
         placeholder: x(e.value),
         portalElement: m,
         value: e.value

package/dist/esm/lib/components/metadata-filter-fields/metadata-filter-fields.js

@@ -1,13 +1,13 @@
 import { Text as m } from "@box/blueprint-web";
-import { useFormikContext as I, getIn as l, FieldArray as L } from "formik";
-import { useEffect as S } from "react";
-import { useIntl as V, FormattedMessage as $ } from "react-intl";
-import w from "../../messages.js";
-import { processMetadataField as C } from "./field-processing-utils.js";
-import { isAnyFieldModified as P, isFieldModifiedFromValue as q } from "./is-modified-utils.js";
-import { s as z } from "../../../../chunks/index.js";
-import { jsx as i, jsxs as B } from "react/jsx-runtime";
-const Y = ({
+import { useFormikContext as L, getIn as l, FieldArray as S } from "formik";
+import { useEffect as V } from "react";
+import { useIntl as $, FormattedMessage as w } from "react-intl";
+import C from "../../messages.js";
+import { processMetadataField as P } from "./field-processing-utils.js";
+import { isAnyFieldModified as q, isFieldModifiedFromValue as z } from "./is-modified-utils.js";
+import { s as B } from "../../../../chunks/index.js";
+import { jsx as i, jsxs as G } from "react/jsx-runtime";
+const Z = ({
   disableForm: d,
   locale: p,
   portalElement: c,
@@ -20,46 +20,48 @@ const Y = ({
   isMultilevelTaxonomyFieldEnabled: y,
   filterOptionsMap: O,
   onDirtyChange: a,
-  isAdvancedTaxonomy: h
+  isAdvancedTaxonomy: h,
+  hasExperimentalVirtualization: g
 }) => {
   const {
     values: o
-  } = I(), g = V(), r = "metadata.fields", s = l(o, r);
-  return S(() => {
+  } = L(), v = $(), r = "metadata.fields", s = l(o, r);
+  return V(() => {
     if (a) {
-      const t = P(s, o, e);
+      const t = q(s, o, e);
       a(t);
     }
-  }, [o, e, a, s]), s.length ? /* @__PURE__ */ i(L, {
+  }, [o, e, a, s]), s.length ? /* @__PURE__ */ i(S, {
     name: r,
     validateOnChange: !1,
     children: () => s.map((t, n) => {
       const {
-        MetadataFilterField: v,
-        showField: N,
-        getFilterOptionsForField: T
-      } = C({
+        MetadataFilterField: N,
+        showField: T,
+        getFilterOptionsForField: k
+      } = P({
         field: t,
         isAdvancedFilterEnabled: e,
         isAdvancedTaxonomy: h,
-        intl: g,
+        intl: v,
         filterOptionsMap: O
-      }), k = l(o, `metadata.fields[${n}].value`), j = t.advancedFilterOptionToExecute, A = q(t.type, k, e, j);
-      return N && /* @__PURE__ */ B("div", {
-        children: [/* @__PURE__ */ i(v, {
+      }), j = l(o, `metadata.fields[${n}].value`), A = t.advancedFilterOptionToExecute, I = z(t.type, j, e, A);
+      return T && /* @__PURE__ */ G("div", {
+        children: [/* @__PURE__ */ i(N, {
           canUseRelativeDates: u,
           disableForm: d,
           fieldAdvancedFilterOptions: M?.[t.key],
           fieldNamePrefix: `metadata.fields[${n}]`,
-          filterOptionsMap: T(),
+          filterOptionsMap: k(),
           isAdvancedFilterEnabled: e,
-          isModified: A && F,
+          isModified: I && F,
           isMultilevelTaxonomyFieldEnabled: y,
           label: t.displayName,
           locale: p,
           onAdvancedFilterOptionChange: x,
           portalElement: c,
-          taxonomyOptionsFetcher: f
+          taxonomyOptionsFetcher: f,
+          hasExperimentalVirtualization: g
         }), !!t.description && /* @__PURE__ */ i(m, {
           as: "span",
           color: "textOnLightSecondary",
@@ -70,14 +72,14 @@ const Y = ({
     })
   }) : /* @__PURE__ */ i(m, {
     as: "span",
-    className: z.noAttributesText,
+    className: B.noAttributesText,
     color: "textOnLightSecondary",
-    children: /* @__PURE__ */ i($, {
-      ...w.noTemplateAtributesError
+    children: /* @__PURE__ */ i(w, {
+      ...C.noTemplateAtributesError
     })
   });
 };
 export {
-  Y as MetadataFilterFields,
-  Y as default
+  Z as MetadataFilterFields,
+  Z as default
 };

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

@@ -1,26 +1,26 @@
 import "@box/combobox-with-api";
 import "./components/metadata-filter-fields/components/metadata-date-field/date-conversion-utils.js";
-import { defaultInitialValues as M } from "./defaults.js";
-import { LoadingIndicator as N } from "@box/blueprint-web";
-import { useFormikContext as V } from "formik";
-import { useEffect as b } from "react";
-import { useIntl as k } from "react-intl";
-import { MetadataFilterFields as D } from "./components/metadata-filter-fields/metadata-filter-fields.js";
-import { MetadataFilterFieldsAccordion as L } from "./components/metadata-filter-fields/metadata-filter-fields-accordion.js";
-import { MetadataTemplateSelector as S } from "./components/metadata-template-selector/metadata-template-selector.js";
-import { mapDataFromTemplate as q } from "./mappers.js";
-import w from "./messages.js";
-import { jsxs as z, jsx as r } from "react/jsx-runtime";
+import { defaultInitialValues as N } from "./defaults.js";
+import { LoadingIndicator as V } from "@box/blueprint-web";
+import { useFormikContext as b } from "formik";
+import { useEffect as k } from "react";
+import { useIntl as D } from "react-intl";
+import { MetadataFilterFields as L } from "./components/metadata-filter-fields/metadata-filter-fields.js";
+import { MetadataFilterFieldsAccordion as S } from "./components/metadata-filter-fields/metadata-filter-fields-accordion.js";
+import { MetadataTemplateSelector as q } from "./components/metadata-template-selector/metadata-template-selector.js";
+import { mapDataFromTemplate as w } from "./mappers.js";
+import z from "./messages.js";
+import { jsxs as A, jsx as r } from "react/jsx-runtime";
 import "../../chunks/types.js";
 import "./components/metadata-filter-fields/components/metadata-date-field/metadata-date-field.js";
 import "./components/metadata-filter-fields/components/metadata-enum-field/metadata-enum-field.js";
 import "./components/metadata-filter-fields/components/metadata-float-field/metadata-float-field.js";
 import "./components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field.js";
 import "./components/metadata-filter-fields/components/metadata-string-field/metadata-string-field.js";
-import '../../styles/metadata-filter.css';const A = "_container_p63iy_1", B = "_loadingIndicator_p63iy_7", e = {
-  container: A,
-  loadingIndicator: B
-}, it = ({
+import '../../styles/metadata-filter.css';const B = "_container_p63iy_1", G = "_loadingIndicator_p63iy_7", e = {
+  container: B,
+  loadingIndicator: G
+}, at = ({
   isAdvancedFilterEnabled: m,
   isModifiedMarkerEnabled: s,
   metadataTemplateOptions: l,
@@ -39,18 +39,19 @@ import '../../styles/metadata-filter.css';const A = "_container_p63iy_1", B = "_
   fieldAdvancedFilterOptions: x,
   hasAccordion: n = !1,
   onDirtyChange: C,
-  isAdvancedTaxonomy: y = !1
+  isAdvancedTaxonomy: y = !1,
+  hasExperimentalVirtualization: j = !1
 }) => {
   const {
     setFieldValue: o
-  } = V(), j = k();
-  b(() => {
-    t ? o("metadata", q(t)) : o("metadata", M);
+  } = b(), v = D();
+  k(() => {
+    t ? o("metadata", w(t)) : o("metadata", N);
   }, [t, o]);
-  const v = () => d ? /* @__PURE__ */ r(N, {
-    "aria-label": j.formatMessage(w.loading),
+  const M = () => d ? /* @__PURE__ */ r(V, {
+    "aria-label": v.formatMessage(z.loading),
     className: e.loadingIndicator
-  }) : t ? /* @__PURE__ */ r(n ? L : D, {
+  }) : t ? /* @__PURE__ */ r(n ? S : L, {
     canUseRelativeDates: g,
     disableForm: c,
     fieldAdvancedFilterOptions: x,
@@ -64,17 +65,18 @@ import '../../styles/metadata-filter.css';const A = "_container_p63iy_1", B = "_
     onAdvancedFilterOptionChange: _,
     onDirtyChange: C,
     portalElement: i,
-    taxonomyOptionsFetcher: f
+    taxonomyOptionsFetcher: f,
+    hasExperimentalVirtualization: j
   }) : null;
-  return /* @__PURE__ */ z("div", {
+  return /* @__PURE__ */ A("div", {
     className: e.container,
-    children: [p && /* @__PURE__ */ r(S, {
+    children: [p && /* @__PURE__ */ r(q, {
       hasError: a,
       metadataTemplateOptions: l,
       portalElement: i
-    }), !a && v()]
+    }), !a && M()]
   });
 };
 export {
-  it as MetadataFilter
+  at as MetadataFilter
 };

package/dist/types/lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field-advanced.d.ts

@@ -1,2 +1,2 @@
 import { MetadataFieldProps } from '../../types';
-export declare const MetadataMultiSelectFieldAdvanced: ({ label, fieldNamePrefix, disableForm, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, portalElement, hasAccordion, isModified, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataMultiSelectFieldAdvanced: ({ label, fieldNamePrefix, disableForm, isAdvancedFilterEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, filterOptionsMap, portalElement, hasAccordion, isModified, hasExperimentalVirtualization, }: MetadataFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/metadata-filter-fields/components/metadata-multi-select-field/metadata-multi-select-field.d.ts

@@ -1,3 +1,3 @@
 import { MetadataFieldProps } from '../../types';
-export declare const MetadataMultiSelectField: ({ disableForm, fieldNamePrefix, label, portalElement, hasAccordion, }: Omit<MetadataFieldProps, "locale" | "taxonomyOptionsFetcher">) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataMultiSelectField: ({ disableForm, fieldNamePrefix, label, portalElement, hasAccordion, hasExperimentalVirtualization, }: Omit<MetadataFieldProps, "locale" | "taxonomyOptionsFetcher">) => import("react/jsx-runtime").JSX.Element;
 export default MetadataMultiSelectField;

package/dist/types/lib/components/metadata-filter-fields/metadata-filter-fields.d.ts

@@ -1,3 +1,3 @@
 import { MetadataFilterFieldsProps } from './types';
-export declare const MetadataFilterFields: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onDirtyChange, isAdvancedTaxonomy, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFilterFields: ({ disableForm, locale, portalElement, taxonomyOptionsFetcher, canUseRelativeDates, isAdvancedFilterEnabled, isModifiedMarkerEnabled, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterFieldsProps) => import("react/jsx-runtime").JSX.Element;
 export default MetadataFilterFields;

package/dist/types/lib/components/metadata-filter-fields/types.d.ts

@@ -28,6 +28,7 @@ export type MetadataFilterFieldsProps = {
     hasAccordion?: boolean;
     onDirtyChange?: (isDirty: boolean) => void;
     isAdvancedTaxonomy?: boolean;
+    hasExperimentalVirtualization?: boolean;
 };
 export type MetadataFieldProps = {
     description?: string | null;
@@ -52,6 +53,7 @@ export type MetadataFieldProps = {
     hasAccordion?: boolean;
     isModified?: boolean;
     placeholder?: string;
+    hasExperimentalVirtualization?: boolean;
 };
 export type FieldType = Extract<MetadataTemplateFieldType, 'string' | 'float' | 'enum' | 'multiSelect' | 'date' | 'taxonomy'>;
 export type PartialRangeValue = Partial<RangeValue>;

package/dist/types/lib/metadata-filter.d.ts

@@ -1,2 +1,2 @@
 import { MetadataFilterProps } from './types';
-export declare const MetadataFilter: ({ isAdvancedFilterEnabled, isModifiedMarkerEnabled, metadataTemplateOptions, portalElement, selectedMetadataTemplate, taxonomyOptionsFetcher, showMetadataSelector, disableForm, isLoading, hasError, locale, canUseRelativeDates, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, hasAccordion, onDirtyChange, isAdvancedTaxonomy, }: MetadataFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MetadataFilter: ({ isAdvancedFilterEnabled, isModifiedMarkerEnabled, metadataTemplateOptions, portalElement, selectedMetadataTemplate, taxonomyOptionsFetcher, showMetadataSelector, disableForm, isLoading, hasError, locale, canUseRelativeDates, isMultilevelTaxonomyFieldEnabled, filterOptionsMap, onAdvancedFilterOptionChange, fieldAdvancedFilterOptions, hasAccordion, onDirtyChange, isAdvancedTaxonomy, hasExperimentalVirtualization, }: MetadataFilterProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -130,4 +130,5 @@ export type MetadataFilterProps = {
     hasAccordion?: boolean;
     onDirtyChange?: (isDirty: boolean) => void;
     isAdvancedTaxonomy?: boolean;
+    hasExperimentalVirtualization?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-filter",
-    "version": "1.74.1",
+    "version": "1.75.0",
     "peerDependencies": {
         "@box/blueprint-web": "^13.1.2",
         "@box/blueprint-web-assets": "^4.101.12",