@box/metadata-filter 1.48.3 → 1.49.1

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

@@ -1,4 +1,4 @@
-import { Text as J, DateI18nProvider as K, DatePicker as k } from "@box/blueprint-web";
+import { Text as J, DateI18nProvider as K, DatePicker as N } from "@box/blueprint-web";
 import { useFormikContext as Q, Field as P } from "formik";
 import { useState as W, useRef as y, useMemo as E } from "react";
 import { useIntl as Y } from "react-intl";
@@ -8,108 +8,110 @@ import { DEFAULT_MAX_DATE as I } from "./constants.js";
 import { convertToFormikValueRanged as $ } from "./date-conversion-utils.js";
 import { MetadataDateFieldRelative as Z } from "./metadata-date-field-relative.js";
 import { s as i } from "../../../../../../chunks/metadata-date-field.module.js";
-import { E as g } from "../../../../../../chunks/types2.js";
+import { E as p } from "../../../../../../chunks/types2.js";
 import { useDateValidation as ee } from "./use-date-validation.js";
 import { getDynamicMaxMinValue as B } from "./utils.js";
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
+import { jsx as t, jsxs as _ } from "react/jsx-runtime";
 const Fe = ({
-  canUseRelativeDates: f,
+  canUseRelativeDates: M,
   ...s
-}) => f ? /* @__PURE__ */ t(Z, {
+}) => M ? /* @__PURE__ */ t(Z, {
   ...s
 }) : /* @__PURE__ */ t(ae, {
   ...s
 }), ae = ({
-  customFieldLabels: f = [],
+  customFieldLabels: M = [],
   direction: s = "horizontal",
-  disableForm: p,
-  fieldNamePrefix: v,
-  label: D,
-  locale: O,
-  portalElement: L,
-  hasAccordion: S
+  disableForm: D,
+  fieldNamePrefix: d,
+  label: v,
+  locale: T,
+  portalElement: O,
+  hasAccordion: w
 }) => {
-  const [R, M] = W(a.FROM), m = `${v}.value.range.gt`, d = `${v}.value.range.lt`, {
-    values: j,
-    setFieldTouched: G,
-    setFieldValue: T
+  const [L, h] = W(a.FROM), m = `${d}.value.range.gt`, c = `${d}.value.range.lt`, {
+    values: S,
+    setFieldTouched: j,
+    setFieldValue: R
   } = Q(), {
     validateDates: V,
-    fromDatePickerValue: c,
-    toDatePickerValue: u,
+    fromDatePickerValue: u,
+    toDatePickerValue: f,
     fromErrorType: b,
-    toErrorType: x
-  } = ee(j, m, d, O, !0), o = Y(), h = y(c), F = y(u), A = {
+    toErrorType: A
+  } = ee(S, m, c, T, !0), o = Y(), F = y(u), g = y(f), C = {
     clearDatePickerAriaLabel: o.formatMessage(n.clearSelectedDate),
     nextMonthAriaLabel: o.formatMessage(n.switchToNextMonth),
     openCalendarDropdownAriaLabel: o.formatMessage(n.openCalendar),
     previousMonthAriaLabel: o.formatMessage(n.switchToNextMonth)
-  }, [X, _] = f, z = (e) => {
+  }, [G, X] = M, z = (e) => {
     const r = $(e, a.FROM);
-    h.current = e, T(m, r), M(a.FROM);
+    F.current = e, R(m, r), h(a.FROM);
   }, H = (e) => {
     const r = $(e, a.TO);
-    F.current = e, T(d, r), M(a.TO);
-  }, C = (e) => {
-    const r = e === a.FROM ? m : d;
-    G(r, !0), M(e);
-  }, U = E(() => B(u, I), [u]), q = E(() => B(c), [c]), N = (e, r, l) => !!(r === g.MAX && e === g.OVERLAPPING || e === g.OVERLAPPING && l);
-  return /* @__PURE__ */ w("div", {
+    g.current = e, R(c, r), h(a.TO);
+  }, k = (e) => {
+    const r = e === a.FROM ? m : c;
+    j(r, !0), h(e);
+  }, U = E(() => B(f, I), [f]), q = E(() => B(u), [u]), x = (e, r, l) => !!(r === p.MAX && e === p.OVERLAPPING || e === p.OVERLAPPING && l);
+  return /* @__PURE__ */ _("div", {
     className: i.container,
-    "data-testid": `${D}-field`,
-    children: [!S && /* @__PURE__ */ t(J, {
+    "data-testid": `${v}-field`,
+    children: [!w && /* @__PURE__ */ t(J, {
       as: "span",
       className: i.rangeFieldLabel,
       color: "textOnLightSecondary",
       variant: "bodyDefaultBold",
-      children: D
+      children: v
     }), /* @__PURE__ */ t(K, {
-      locale: O,
-      children: /* @__PURE__ */ w("div", {
+      locale: T,
+      children: /* @__PURE__ */ _("div", {
         className: `${i.rangeInputsContainer} ${s === "vertical" ? i.verticalLayout : ""}`,
         children: [/* @__PURE__ */ t(P, {
           name: m,
-          validate: (e) => V(h.current, F.current, a.FROM),
+          validate: (e) => V(F.current, g.current, a.FROM),
           children: ({
             field: e,
             meta: r
           }) => /* @__PURE__ */ t("div", {
             className: i.inputContainer,
-            children: /* @__PURE__ */ t(k, {
+            children: /* @__PURE__ */ t(N, {
               ...e,
-              ...A,
+              ...C,
               calendarAriaLabel: o.formatMessage(n.selectFromDate),
-              error: N(b, x, R !== a.FROM) ? void 0 : r.error,
-              isDisabled: p,
-              label: X || o.formatMessage(n.fieldFromLabel),
+              dataTargetId: `DatePicker-${d}_from`,
+              error: x(b, A, L !== a.FROM) ? void 0 : r.error,
+              isDisabled: D,
+              label: G || o.formatMessage(n.fieldFromLabel),
               maxValue: U,
-              onBlur: () => C(a.FROM),
+              onBlur: () => k(a.FROM),
               onChange: (l) => z(l),
-              portalElement: L,
-              value: c
+              portalElement: O,
+              value: u
             })
           })
         }), /* @__PURE__ */ t(P, {
-          name: d,
-          validate: (e) => V(h.current, F.current, a.TO),
+          name: c,
+          validate: (e) => V(F.current, g.current, a.TO),
           children: ({
             field: e,
             meta: r
           }) => /* @__PURE__ */ t("div", {
             className: i.inputContainer,
-            children: /* @__PURE__ */ t(k, {
+            children: /* @__PURE__ */ t(N, {
               ...e,
-              ...A,
+              ...C,
               calendarAriaLabel: o.formatMessage(n.selectToDate),
-              error: N(x, b, R !== a.TO) ? void 0 : r.error,
-              isDisabled: p,
-              label: _ || o.formatMessage(n.fieldToLabel),
+              dataTargetId: `DatePicker-${d}_to`,
+              error: x(A, b, L !== a.TO) ? void 0 : r.error,
+              isDisabled: D,
+              label: X || o.formatMessage(n.fieldToLabel),
               maxValue: I,
               minValue: q,
-              onBlur: () => C(a.TO),
+              onBlur: () => k(a.TO),
               onChange: (l) => H(l),
-              portalElement: L,
-              value: u
+              portalElement: O,
+              value: f
             })
           })
         })]

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

@@ -1,11 +1,11 @@
-import { Select as l, SELECT_EMPTY_VALUE as n } from "@box/blueprint-web";
-import { useFormikContext as x, getIn as E, Field as F } from "formik";
-import { useIntl as M, FormattedMessage as V } from "react-intl";
-import m from "../../../../messages.js";
+import { Select as l, SELECT_EMPTY_VALUE as o } from "@box/blueprint-web";
+import { useFormikContext as E, getIn as F, Field as M } from "formik";
+import { useIntl as V, FormattedMessage as x } from "react-intl";
+import i from "../../../../messages.js";
 import { jsx as t, jsxs as C } from "react/jsx-runtime";
-const P = ({
-  disableForm: u,
-  fieldNamePrefix: o,
+const O = ({
+  disableForm: m,
+  fieldNamePrefix: s,
   label: d,
   portalElement: h,
   hasAccordion: p,
@@ -13,35 +13,36 @@ const P = ({
 }) => {
   const {
     setFieldValue: c,
-    values: f
-  } = x(), g = M(), s = `${o}.value.enum[0]`, r = E(f, `${o}.options`, []).map(({
+    values: g
+  } = E(), f = V(), r = `${s}.value.enum[0]`, n = F(g, `${s}.options`, []).map(({
     key: a
-  }) => a), i = v || g.formatMessage(m.selectValuePlaceholder);
+  }) => a), u = v || f.formatMessage(i.selectValuePlaceholder);
   return /* @__PURE__ */ t("div", {
     "data-testid": `${d}-field`,
-    children: /* @__PURE__ */ t(F, {
-      name: s,
+    children: /* @__PURE__ */ t(M, {
+      name: r,
       children: ({
         field: a
       }) => /* @__PURE__ */ t(l, {
-        disabled: u,
+        "data-target-id": `Select-${s}`,
+        disabled: m,
         hideLabel: p,
         label: d,
         onValueChange: (e) => {
-          e === n ? c(s, "") : c(s, e);
+          e === o ? c(r, "") : c(r, e);
         },
-        placeholder: i,
+        placeholder: u,
         ...a,
-        value: a.value === n ? "" : a.value,
+        value: a.value === o ? "" : a.value,
         children: /* @__PURE__ */ C(l.Content, {
           container: h,
           children: [/* @__PURE__ */ t(l.Option, {
-            text: i,
-            value: n,
-            children: /* @__PURE__ */ t(V, {
-              ...m.selectValuePlaceholder
+            text: u,
+            value: o,
+            children: /* @__PURE__ */ t(x, {
+              ...i.selectValuePlaceholder
             })
-          }), r == null ? void 0 : r.map((e) => /* @__PURE__ */ t(l.Option, {
+          }), n == null ? void 0 : n.map((e) => /* @__PURE__ */ t(l.Option, {
             text: e,
             value: e,
             children: e
@@ -52,6 +53,6 @@ const P = ({
   });
 };
 export {
-  P as MetadataEnumField,
-  P as default
+  O as MetadataEnumField,
+  O as default
 };

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

@@ -1,58 +1,59 @@
-import { Text as P, TextInput as y } from "@box/blueprint-web";
-import { useFormikContext as S, getIn as M, Field as E } from "formik";
-import { useState as k, useRef as V } from "react";
+import { Text as S, TextInput as y } from "@box/blueprint-web";
+import { useFormikContext as _, getIn as M, Field as E } from "formik";
+import { useState as k, useRef as I } from "react";
 import { useIntl as A } from "react-intl";
-import x from "../../../../messages.js";
+import V from "../../../../messages.js";
 import { R as r } from "../../../../../../chunks/types.js";
-import { fieldDefaultProps as L } from "../constants.js";
-import { s as i } from "../../../../../../chunks/metadata-float-field.module.js";
+import { fieldDefaultProps as $ } from "../constants.js";
+import { s as d } from "../../../../../../chunks/metadata-float-field.module.js";
 import { u as G, E as H } from "../../../../../../chunks/use-float-validation.js";
-import { jsxs as N, jsx as t } from "react/jsx-runtime";
-const Z = ({
+import { jsxs as x, jsx as t } from "react/jsx-runtime";
+const Y = ({
   label: n,
-  fieldNamePrefix: m,
-  disableForm: f,
-  hasAccordion: I
+  fieldNamePrefix: s,
+  disableForm: p,
+  hasAccordion: L
 }) => {
-  const p = A(), [h, d] = k(r.FROM), {
+  const f = A(), [h, c] = k(r.FROM), {
     values: g,
     setFieldValue: F,
-    setFieldTouched: $
-  } = S(), l = `${m}.value.range.gt`, s = `${m}.value.range.lt`, b = M(g, l), B = M(g, s), c = V(b), u = V(B), {
+    setFieldTouched: b
+  } = _(), l = `${s}.value.range.gt`, i = `${s}.value.range.lt`, B = M(g, l), N = M(g, i), u = I(B), m = I(N), {
     validateFloats: T,
     fromErrorType: O,
     toErrorType: v
   } = G(), j = (e) => {
-    c.current = e, F(l, e), d(r.FROM);
+    u.current = e, F(l, e), c(r.FROM);
   }, D = (e) => {
-    u.current = e, F(s, e), d(r.TO);
+    m.current = e, F(i, e), c(r.TO);
   }, R = (e, o) => {
-    $(e, !0), d(o);
+    b(e, !0), c(o);
   }, C = (e, o, a) => !!(e === H.OVERLAPPING && a);
-  return /* @__PURE__ */ N("div", {
-    className: i.container,
+  return /* @__PURE__ */ x("div", {
+    className: d.container,
     "data-testid": `${n}-field`,
-    children: [!I && /* @__PURE__ */ t(P, {
+    children: [!L && /* @__PURE__ */ t(S, {
       as: "span",
       color: "textOnLightSecondary",
       variant: "bodyDefaultBold",
       children: n
-    }), /* @__PURE__ */ N("div", {
-      className: i.rangeInputsContainer,
+    }), /* @__PURE__ */ x("div", {
+      className: d.rangeInputsContainer,
       children: [/* @__PURE__ */ t(E, {
         name: `${l}`,
-        validate: () => T(c.current, u.current, r.FROM),
+        validate: () => T(u.current, m.current, r.FROM),
         children: ({
           field: e,
           meta: o
         }) => /* @__PURE__ */ t("div", {
-          className: i.inputContainer,
+          className: d.inputContainer,
           children: /* @__PURE__ */ t(y, {
-            ...L,
+            ...$,
             ...e,
-            disabled: f,
+            "data-target-id": `TextInput-${s}_from`,
+            disabled: p,
             error: C(O, v, h !== r.FROM) ? void 0 : o.error,
-            label: p.formatMessage(x.fieldFromLabel, {
+            label: f.formatMessage(V.fieldFromLabel, {
               label: n
             }),
             onBlur: () => R(l, r.FROM),
@@ -61,22 +62,23 @@ const Z = ({
           })
         })
       }), /* @__PURE__ */ t(E, {
-        name: `${s}`,
-        validate: () => T(c.current, u.current, r.TO),
+        name: `${i}`,
+        validate: () => T(u.current, m.current, r.TO),
         children: ({
           field: e,
           meta: o
         }) => /* @__PURE__ */ t("div", {
-          className: i.inputContainer,
+          className: d.inputContainer,
           children: /* @__PURE__ */ t(y, {
-            ...L,
+            ...$,
             ...e,
-            disabled: f,
+            "data-target-id": `TextInput-${s}_to`,
+            disabled: p,
             error: C(v, O, h !== r.TO) ? void 0 : o.error,
-            label: p.formatMessage(x.fieldToLabel, {
+            label: f.formatMessage(V.fieldToLabel, {
               label: n
             }),
-            onBlur: () => R(s, r.TO),
+            onBlur: () => R(i, r.TO),
             onChange: (a) => D(a.currentTarget.value),
             placeholder: "0"
           })
@@ -86,6 +88,6 @@ const Z = ({
   });
 };
 export {
-  Z as MetadataFloatField,
-  Z as default
+  Y as MetadataFloatField,
+  Y as default
 };

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

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

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

@@ -1,75 +1,76 @@
-import { TextInput as $ } from "@box/blueprint-web";
+import { TextInput as j } from "@box/blueprint-web";
 import { Field as k } from "formik";
-import { useState as y, useCallback as n } from "react";
+import { useState as y, useCallback as x } from "react";
 import { useIntl as D } from "react-intl";
-import x from "../../../../messages.js";
+import i from "../../../../messages.js";
 import { fieldDefaultProps as H } from "../constants.js";
-import { getInitialAdvancedFilterValue as N, createFieldValue as w, getInputValue as P, shouldHideTextInput as q } from "./utils.js";
-import { jsx as p, jsxs as z, Fragment as B } from "react/jsx-runtime";
-import { A as G } from "../../../../../../chunks/index.js";
-const J = ({
-  label: s,
-  fieldNamePrefix: f,
+import { getInitialAdvancedFilterValue as q, createFieldValue as w, getInputValue as z, shouldHideTextInput as B } from "./utils.js";
+import { jsx as p, jsxs as G, Fragment as J } from "react/jsx-runtime";
+import { A as K } from "../../../../../../chunks/index.js";
+const N = ({
+  label: m,
+  fieldNamePrefix: V,
   disableForm: g,
   isAdvancedFilterEnabled: t,
   onAdvancedFilterOptionChange: o,
-  fieldAdvancedFilterOptions: h,
-  filterOptionsMap: I,
+  fieldAdvancedFilterOptions: I,
+  filterOptionsMap: h,
   hasAccordion: c,
   isModified: S,
-  placeholder: L
+  placeholder: T
 }) => {
-  const i = D(), r = `${f}.value.enum[0]`, [l, M] = y(N(h, I)), T = n((e, m, u) => {
-    M(e), o == null || o(r, e);
-    const a = w(m, e, t);
-    u.setFieldValue(r, a);
-  }, [r, t, o]), j = n((e, m) => {
-    const u = e.target.value, a = w(u, l, t);
-    m.setFieldValue(r, a);
-  }, [l, t, r]);
+  const n = D(), a = `${V}.value.enum[0]`, [l, L] = y(q(I, h)), M = x((e, s, u) => {
+    L(e), o == null || o(a, e);
+    const r = w(s, e, t);
+    u.setFieldValue(a, r);
+  }, [a, t, o]), $ = x((e, s) => {
+    const u = e.target.value, r = w(u, l, t);
+    s.setFieldValue(a, r);
+  }, [l, t, a]);
   return /* @__PURE__ */ p("div", {
-    "data-testid": `${s}-field`,
+    "data-testid": `${m}-field`,
     children: /* @__PURE__ */ p(k, {
-      name: r,
+      name: a,
       children: ({
         field: e,
-        meta: m,
+        meta: s,
         form: u
       }) => {
-        const a = P(e.value, t);
-        return /* @__PURE__ */ z(B, {
-          children: [t && /* @__PURE__ */ p(G, {
+        const r = z(e.value, t);
+        return /* @__PURE__ */ G(J, {
+          children: [t && /* @__PURE__ */ p(K, {
             disableForm: g,
-            fieldAdvancedFilterOptions: h,
-            fieldNamePrefix: f,
-            filterOptionsMap: I,
+            fieldAdvancedFilterOptions: I,
+            fieldNamePrefix: V,
+            filterOptionsMap: h,
             isModified: S,
-            label: s,
+            label: m,
             onAdvancedFilterOptionChange: o,
-            onValueChange: (V) => T(V, a, u),
+            onValueChange: (f) => M(f, r, u),
             showLabel: t && !c,
             value: l
-          }), !q(t, l) && /* @__PURE__ */ p($, {
+          }), !B(t, l) && /* @__PURE__ */ p(j, {
             ...H,
             ...e,
-            "aria-label": i.formatMessage(x.enterValueAriaLabel, {
-              label: s
+            "aria-label": n.formatMessage(i.enterValueAriaLabel, {
+              label: m
             }),
+            "data-target-id": `TextInput-${V}`,
             disabled: g,
-            error: m.error,
+            error: s.error,
             hideLabel: t || c,
-            label: s,
-            onChange: (V) => j(V, u),
-            placeholder: L || i.formatMessage(x.setValuePlaceholder),
-            value: a
+            label: m,
+            onChange: (f) => $(f, u),
+            placeholder: T || n.formatMessage(i.setValuePlaceholder),
+            value: r
           })]
         });
       }
     })
   });
 };
-J.displayName = "MetadataStringField";
+N.displayName = "MetadataStringField";
 export {
-  J as MetadataStringField,
-  J as default
+  N as MetadataStringField,
+  N as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/metadata-filter",
-    "version": "1.48.3",
+    "version": "1.49.1",
     "peerDependencies": {
         "@box/blueprint-web": "^7.8.0",
         "@box/blueprint-web-assets": "^4.16.0",
@@ -11,7 +11,7 @@
         "react-intl": "6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^12.98.3",
+        "@box/blueprint-web": "^12.99.0",
         "@box/blueprint-web-assets": "^4.82.0",
         "@box/storybook-utils": "^0.14.19",
         "react": "^18.3.0",